Python matplotlibを使って学ぶ統計処理 正規分布 新しいページはコチラ
提供: yonewiki
(→アニメーションマーカー) |
(→アニメーションマーカー) |
||
148行: | 148行: | ||
=== アニメーションマーカー === | === アニメーションマーカー === | ||
− | <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> |
<script> | <script> | ||
− | $<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', | + | $<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>window<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>.scroll<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>function <span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span><span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>{ |
− | $<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', | + | $<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>".marker-animation"<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>.each<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>function<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span><span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>{ |
− | + | var position = $<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>this<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>.offset<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span><span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>.top; //ページの一番上から要素までの距離を取得 | |
− | + | var scroll = $<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>window<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>.scrollTop<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span><span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>; //スクロールの位置を取得 | |
− | + | var windowHeight = $<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>window<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>.height<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span><span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>; //ウインドウの高さを取得 | |
− | + | if <span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>scroll > position - windowHeight<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>{ //スクロール位置が要素の位置を過ぎたとき | |
− | + | $<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>this<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>.addClass<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>'active'<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>; //クラス「active」を与える | |
− | + | } | |
− | }<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', | + | }<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>; |
− | }<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', | + | }<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>; |
</script> | </script> | ||
− | <style type= "text/css"> | + | <style type= "text/css"> |
.marker-animation.active{ | .marker-animation.active{ | ||
− | + | background-position: -100% .5em; | |
} | } | ||
− | .marker-animation { | + | .marker-animation { |
− | + | background-image: -webkit-linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>left, transparent 50%, rgb<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>255,250,153<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span> 50%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>; | |
− | + | background-image: -moz-linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>left, transparent 50%, rgb<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>255,250,153<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span> 50%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>; | |
− | + | background-image: -ms-linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>left, transparent 50%, rgb<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>255,250,153<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span> 50%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>; | |
− | + | background-image: -o-linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>left, transparent 50%, rgb<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>255,250,153<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span> 50%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>; | |
− | + | background-image: linear-gradient<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>left, transparent 50%, rgb<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">(</span>255,250,153<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span> 50%<span style = "'Meiryo', 'ヒラギノ角ゴ Pro W3 ', 'MS Pゴシック', ' Osaka', sans-serif; font-style: normal; !important">)</span>; | |
− | + | background-repeat: repeat-x; | |
− | + | background-size: 200% .8em; | |
− | + | background-position: 0 .5em; | |
− | + | transition: all 2s ease; | |
− | + | font-weight: bold; | |
} | } | ||
</style> | </style> | ||
+ | |||
+ | |||
+ | |||