Python matplotlibを使って学ぶ統計処理 正規分布 新しいページはコチラ
提供: yonewiki
(→正規分布の公式) |
(→■アニメーションマーカー) |
||
| 147行: | 147行: | ||
=== <big><big><span style= "background: #3178ff; color: #ffffff; font-weight: bold;border-radius: 3px; padding: 5px; width: 98%; display: inline-block;">■アニメーションマーカー</span></big></big> === | === <big><big><span style= "background: #3178ff; color: #ffffff; font-weight: bold;border-radius: 3px; padding: 5px; width: 98%; display: inline-block;">■アニメーションマーカー</span></big></big> === | ||
| + | <yjavascript> | ||
| + | <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-size: 100% 100%; | ||
| + | background-position: 0px 100%; | ||
| + | } | ||
| + | |||
| + | .marker-animation5 { | ||
| + | background-image: linear-gradient(to bottom, transparent 45%, #ff7f7f 77% 90%, #ff9f9f 95%); | ||
| + | background-repeat: no-repeat; | ||
| + | background-size: 0% 100%; | ||
| + | background-position: 0px 100%; | ||
| + | transition: all 5s ease; | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | </style> | ||
| + | </yjavascript> | ||
| + | |||
| + | <span class="marker-animation5"> | ||
| + | ここにマーカーをつける文章をいれる | ||
| + | </span> | ||
| + | |||
蛍光ペンのようなアンダーラインをつけたい文字が画面に表示されてからアニメーションを伴って、左から右にアンダーラインが引かれていくように見せる方法です。HTMLに以下のようなスクリプトを同じファイル内にまとめて記述することで実現出来ます。javascriptとcssと利用部分の3つのセクションから構成されます。同一のファイルにまとめて記載したくない場合はjavascript部分とcss部分を別ファイルにして、HTML内で読み込むようにして利用して下さい。 | 蛍光ペンのようなアンダーラインをつけたい文字が画面に表示されてからアニメーションを伴って、左から右にアンダーラインが引かれていくように見せる方法です。HTMLに以下のようなスクリプトを同じファイル内にまとめて記述することで実現出来ます。javascriptとcssと利用部分の3つのセクションから構成されます。同一のファイルにまとめて記載したくない場合はjavascript部分とcss部分を別ファイルにして、HTML内で読み込むようにして利用して下さい。 | ||
