Python matplotlibを使って学ぶ統計処理 正規分布 新しいページはコチラ
提供: yonewiki
(→アニメーションマーカー) |
(→アニメーションマーカー) |
||
| 149行: | 149行: | ||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | ||
| + | |||
<script> | <script> | ||
| + | |||
$<span>(</span>window).scroll(function (){ | $<span>(</span>window).scroll(function (){ | ||
| + | |||
$(".marker-animation").each(function(){ | $(".marker-animation").each(function(){ | ||
| + | |||
var position = $(this).offset().top; //ページの一番上から要素までの距離を取得 | var position = $(this).offset().top; //ページの一番上から要素までの距離を取得 | ||
| + | |||
var scroll = $(window).scrollTop(); //スクロールの位置を取得 | var scroll = $(window).scrollTop(); //スクロールの位置を取得 | ||
| + | |||
var windowHeight = $(window).height(); //ウインドウの高さを取得 | var windowHeight = $(window).height(); //ウインドウの高さを取得 | ||
| + | |||
if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき | if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき | ||
| + | |||
 $(this).addClass('active'); //クラス「active」を与える |  $(this).addClass('active'); //クラス「active」を与える | ||
| + | |||
} | } | ||
| + | |||
}); | }); | ||
| + | |||
}); | }); | ||
| + | |||
</script> | </script> | ||
| + | |||
<style type= "text/css"> | <style type= "text/css"> | ||
| + | |||
.marker-animation.active{ | .marker-animation.active{ | ||
| + | |||
 background-position: -100% .5em; |  background-position: -100% .5em; | ||
| + | |||
} | } | ||
.marker-animation { | .marker-animation { | ||
| + | |||
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%); | background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%); | ||
| + | |||
background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%); | background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%); | ||
| + | |||
background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%); | background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%); | ||
background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%); | background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%); | ||
| + | |||
background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%); | background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%); | ||
| + | |||
background-repeat: repeat-x; | background-repeat: repeat-x; | ||
| + | |||
background-size: 200% .8em; | background-size: 200% .8em; | ||
| + | |||
background-position: 0 .5em; | background-position: 0 .5em; | ||
| + | |||
transition: all 2s ease; | transition: all 2s ease; | ||
| + | |||
font-weight: bold; | font-weight: bold; | ||
| + | |||
} | } | ||
