Python matplotlibを使って学ぶ統計処理 正規分布 新しいページはコチラ
提供: yonewiki
(→アニメーションマーカー) |
(→アニメーションマーカー) |
||
| 164行: | 164行: | ||
if <span>(</span>scroll > position - windowHeight<span>)</span>{ //スクロール位置が要素の位置を過ぎたとき | if <span>(</span>scroll > position - windowHeight<span>)</span>{ //スクロール位置が要素の位置を過ぎたとき | ||
| − |  $<span>(</span>this<span>)</span>.addClass<span>(</span>'active'<span>)</span>; //クラス「active」を与える | + | $<span>(</span>this<span>)</span>.addClass<span>(</span>'active'<span>)</span>; //クラス「active」を与える |
} | } | ||
| 213行: | 213行: | ||
<script> | <script> | ||
$(window).scroll(function (){ | $(window).scroll(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」を与える | |
} | } | ||
| − | |||
| − | |||
</script> | </script> | ||
<style type= "text/css"> | <style type= "text/css"> | ||
| − | |||
.marker-animation.active{ | .marker-animation.active{ | ||
| − | + | 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%); | ||
