|
|
| 182行: |
182行: |
| | </style> | | </style> |
| | </syntaxhighlight> | | </syntaxhighlight> |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | $<span><span>(</span></span>window<span>)</span>.scroll<span><span>(</span></span>function <span>(</span><span>)</span>{
| |
| − |
| |
| − | $<span>(</span>".marker-animation"<span>)</span>.each<span>(</span>function<span>(</span><span>)</span>{
| |
| − |
| |
| − | var position = $<span>(</span>this<span>)</span>.offset<span>(</span><span>)</span>.top; //ページの一番上から要素までの距離を取得
| |
| − |
| |
| − | var scroll = $<span>(</span>window<span>)</span>.scrollTop<span>(</span><span>)</span>; //スクロールの位置を取得
| |
| − |
| |
| − | var windowHeight = $<span>(</span>window<span>)</span>.height<span>(</span><span>)</span>; //ウインドウの高さを取得
| |
| − |
| |
| − | if <span>(</span>scroll > position - windowHeight<span>)</span>{ //スクロール位置が要素の位置を過ぎたとき
| |
| − |
| |
| − | $<span>(</span>this<span>)</span>.addClass<span>(</span>'active'<span>)</span>; //クラス「active」を与える
| |
| − |
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − | <style type= "text/css">
| |
| − |
| |
| − | .marker-animation.active{
| |
| − |
| |
| − |  background-position: -100% .5em;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .marker-animation {
| |
| − |
| |
| − | background-image: -webkit-linear-gradient<span>(</span>left, transparent 50%, rgb<span>(</span>255,250,153<span>)</span> 50%<span>)</span>;
| |
| − |
| |
| − | background-image: -moz-linear-gradient<span>(</span>left, transparent 50%, rgb<span>(</span>255,250,153<span>)</span> 50%<span>)</span>;
| |
| − |
| |
| − | background-image: -ms-linear-gradient<span>(</span>left, transparent 50%, rgb<span>(</span>255,250,153<span>)</span> 50%<span>)</span>;
| |
| − |
| |
| − | background-image: -o-linear-gradient<span>(</span>left, transparent 50%, rgb<span>(</span>255,250,153<span>)</span> 50%<span>)</span>;
| |
| − |
| |
| − | background-image: linear-gradient<span>(</span>left, transparent 50%, rgb<span>(</span>255,250,153<span>)</span> 50%<span>)</span>;
| |
| − |
| |
| − | background-repeat: repeat-x;
| |
| − |
| |
| − | background-size: 200% .8em;
| |
| − |
| |
| − | background-position: 0 .5em;
| |
| − |
| |
| − | transition: all 2s ease;
| |
| − |
| |
| − | font-weight: bold;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| | | | |
| | <yjavascript> | | <yjavascript> |
