Python matplotlibを使って学ぶ統計処理 正規分布 新しいページはコチラ
提供: yonewiki
(→■アニメーションマーカー) |
(→■アニメーションマーカー) |
||
| 151行: | 151行: | ||
<script> | <script> | ||
$(window).scroll(function (){ | $(window).scroll(function (){ | ||
| − | $(".marker- | + | $(".marker-animation6").each(function(){ |
var position = $(this).offset().top; //ページの一番上から要素までの距離を取得 | var position = $(this).offset().top; //ページの一番上から要素までの距離を取得 | ||
var scroll = $(window).scrollTop(); //スクロールの位置を取得 | var scroll = $(window).scrollTop(); //スクロールの位置を取得 | ||
| 162行: | 162行: | ||
</script> | </script> | ||
<style type= "text/css"> | <style type= "text/css"> | ||
| − | .marker- | + | .marker-animation6.active{ |
background-size: 100% 100%; | background-size: 100% 100%; | ||
background-position: 0px 100%; | background-position: 0px 100%; | ||
} | } | ||
| − | .marker- | + | .marker-animation6 { |
| − | background-image: linear-gradient(to bottom, transparent 45%, #ff7f7f 77% 90%, #ff9f9f 95%); | + | background-image: |
| + | linear-gradient(to bottom, transparent 45%, #ff7f7f 77% 90%, #ff9f9f 95%), | ||
| + | linear-gradient(to right, transparent 45%, #ff7f7f 77% 90%, #ff9f9f 95%); | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-size: 0% 100%; | background-size: 0% 100%; | ||
| 177行: | 179行: | ||
</style> | </style> | ||
</yjavascript> | </yjavascript> | ||
| − | + | <!-- | |
| − | <span class="marker- | + | <span class="marker-animation6"> |
ここにマーカーをつける文章をいれる | ここにマーカーをつける文章をいれる | ||
</span> | </span> | ||
| − | + | --> | |
蛍光ペンのようなアンダーラインをつけたい文字が画面に表示されてからアニメーションを伴って、左から右にアンダーラインが引かれていくように見せる方法です。HTMLに以下のようなスクリプトを同じファイル内にまとめて記述することで実現出来ます。javascriptとcssと利用部分の3つのセクションから構成されます。同一のファイルにまとめて記載したくない場合はjavascript部分とcss部分を別ファイルにして、HTML内で読み込むようにして利用して下さい。 | 蛍光ペンのようなアンダーラインをつけたい文字が画面に表示されてからアニメーションを伴って、左から右にアンダーラインが引かれていくように見せる方法です。HTMLに以下のようなスクリプトを同じファイル内にまとめて記述することで実現出来ます。javascriptとcssと利用部分の3つのセクションから構成されます。同一のファイルにまとめて記載したくない場合はjavascript部分とcss部分を別ファイルにして、HTML内で読み込むようにして利用して下さい。 | ||
