Python matplotlibを使って学ぶ統計処理 正規分布 新しいページはコチラ
提供: yonewiki
(→アニメーションマーカー) |
(→アニメーションマーカー) |
||
| 153行: | 153行: | ||
$(".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'); // | + | //画面の高さを引いた部分よりスクロール位置が大きくなったら |
| + | $(this).addClass('active'); //.marker-animationのactiveというスタイル要素状態を設定する | ||
} | } | ||
}); | }); | ||
| 165行: | 166行: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
<style type= "text/css"> | <style type= "text/css"> | ||
| − | .marker-animation.active{ | + | .marker-animation.active{ #mraker-animation.activeというスタイルになると |
| − | background-position: -100% .5em; | + | background-position: -100% .5em; // |
} | } | ||
