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