Python matplotlibを使って学ぶ統計処理 正規分布 新しいページはコチラ
提供: yonewiki
(→アニメーションマーカー) |
(→アニメーションマーカー) |
||
| 205行: | 205行: | ||
<style type= "text/css"> | <style type= "text/css"> | ||
.marker-animation.active{ /*mraker-animation.activeというスタイルになると*/ | .marker-animation.active{ /*mraker-animation.activeというスタイルになると*/ | ||
| − | background-position: -100% .5em; /* | + | background-position: -100% .5em; /*背景200%の大きさの領域の右から100％の部分が左下隅に*/ |
| + | /*なるように位置に背景領域を設定する。*/ | ||
/*更に背景高さ位置を上から0.5em(1emは文字1文字分の幅に相当なので、*/ | /*更に背景高さ位置を上から0.5em(1emは文字1文字分の幅に相当なので、*/ | ||
/*文字半分くらい)に設定、背景領域の下側が押し出される感じ */ | /*文字半分くらい)に設定、背景領域の下側が押し出される感じ */ | ||
| 365行: | 366行: | ||
ここにマーカーをつける文章をいれる | ここにマーカーをつける文章をいれる | ||
</span> | </span> | ||
| + | |||
| + | マーカーを縦にグラデーションする方式のスクリプト | ||
| + | <syntaxhighlight lang="javascript"> | ||
| + | <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> | ||
| + | </syntaxhighlight> | ||
| + | <syntaxhighlight lang="css"> | ||
| + | <style type= "text/css"> | ||
| + | .marker-animation5.active{ | ||
| + | background-size: 100% 100%; | ||
| + | background-position: 0px 100%; | ||
| + | } | ||
| + | |||
| + | .marker-animation5 { | ||
| + | background-image: -webkit-linear-gradient(bottom, transparent 50%, #7fbfff 50%); | ||
| + | background-image: -moz-linear-gradient(bottom, transparent 50%, #7fbfff 50%); | ||
| + | background-image: -ms-linear-gradient(bottom, transparent 50%, #7fbff 50%); | ||
| + | background-image: -o-linear-gradient(bottom, transparent 50%, #7fbfff 50%); | ||
| + | background-image: linear-gradient(to bottom, transparent 50%, #7fbfff 50%); | ||
| + | background-repeat: no-repeat; | ||
| + | background-size: 0% 100%; | ||
| + | background-position: 0px 100%; | ||
| + | transition: all 5s ease; | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | </style> | ||
| + | </syntaxhighlight> | ||
lineargradient(to bottom,… -webkit-llineargradient(bottom その他のブラウザ向けもwebkitと同じ | lineargradient(to bottom,… -webkit-llineargradient(bottom その他のブラウザ向けもwebkitと同じ | ||
| 370行: | 409行: | ||
background-repeat: no-repeat: | background-repeat: no-repeat: | ||
| − | background-size: | + | background-size: 100% 100%; ← 0% 100%; |
| − | background-position: 0 100%; ← | + | background-position: 0 100%; ← 0% 100%; |
<span class="marker-animation4"> | <span class="marker-animation4"> | ||
ここにマーカーをつける文章をいれる | ここにマーカーをつける文章をいれる | ||
</span> | </span> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
