Python matplotlibを使って学ぶ統計処理 正規分布 新しいページはコチラ
提供: yonewiki
(→アニメーションマーカー) |
(→アニメーションマーカー) |
||
| 197行: | 197行: | ||
$(window).scroll(function (){ | $(window).scroll(function (){ | ||
$(".marker-animation").each(function(){ | $(".marker-animation").each(function(){ | ||
| + | var position = $(this).offset().top; //ページの一番上から要素までの距離を取得 | ||
| + | var scroll = $(window).scrollTop(); //スクロールの位置を取得 | ||
| + | var windowHeight = $(window).height(); //ウインドウの高さを取得 | ||
| + | if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき | ||
| + | $(this).addClass('active'); //クラス「active」を与える | ||
| + | } | ||
| + | }); | ||
| + | $(".marker-animation2").each(function(){ | ||
var position = $(this).offset().top; //ページの一番上から要素までの距離を取得 | var position = $(this).offset().top; //ページの一番上から要素までの距離を取得 | ||
var scroll = $(window).scrollTop(); //スクロールの位置を取得 | var scroll = $(window).scrollTop(); //スクロールの位置を取得 | ||
| 224行: | 232行: | ||
} | } | ||
.marker-animation2.active{ | .marker-animation2.active{ | ||
| − | background-position: -100% | + | background-position: -100% 0.5em; |
} | } | ||
| 234行: | 242行: | ||
background-image: linear-gradient(left, transparent 50%, #7fbfff 50%); | background-image: linear-gradient(left, transparent 50%, #7fbfff 50%); | ||
background-repeat: repeat-x; | background-repeat: repeat-x; | ||
| − | background-size: 200% | + | background-size: 200% 0.8em; |
| − | background-position: | + | background-position: 0 0.5em; |
transition: all 2s ease; | transition: all 2s ease; | ||
font-weight: bold; | font-weight: bold; | ||
