スクロールをすると様々なアニメーションがされるのが、多くのサイトで見受けられますが、
ちょっとしたものを自分でも作成してみました。
スクロールをすると、要素がふわっと表示されるものです。
説明ではわからないと思いますので、
デモをご覧ください。
本当にちょっとしたものですが、ほんの少しだけアクセントになるんではないでしょうか。。。
以下方法です！
jQueryを使用していますので、
jqueryを読み込んで下さい。
|
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> |
HTML
|
1 2 3 4 5 6 7 8 9 10 | <ul class="slider"> <li class="slide"><img src="sample1.jpg" width="960" /></li> <li class="slide"><img src="sample2.jpg" width="960"/></li> <li class="slide"><img src="sample3.jpg" width="960"/></li> <li class="slide"><img src="sample4.jpg" width="960"/></li> <li class="slide"><img src="sample1.jpg" width="960" /></li> <li class="slide"><img src="sample2.jpg" width="960"/></li> <li class="slide"><img src="sample3.jpg" width="960"/></li> <li class="slide"><img src="sample4.jpg" width="960"/></li> </ul> |
そして、CSSは、
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 | .slider li { width: 100%; height: 400px; margin-bottom: 50px; overflow: hidden; box-shadow: 0 0 3px #999,inset 0 0 1px #ffffff; right: 50px; opacity: 0; position: relative; } |
そして、
肝心のjqueryは、
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | $(function(){ $(window).bind('load', function(){ var sct = $(document).scrollTop(); var hei = $(window).height(); function anime(){ sct = $(document).scrollTop(); hei = $(window).height(); $(".slide").each( function(){ if($(this).offset().top + 100 < sct + hei){ $(this).animate({opacity:"1", right: 0}, 1000); }; }); } //スクロールした時 $(window).scroll(function () { anime(); }); //リサイズした時 $(window).resize(function(){ anime(); }); anime(); }); }); |
bindをしないと、chromeで正確な高さを取得できません。
あとは、スクロールやリサイズした時も対応するようにしています。
要素のアニメーションは、ウィンドウの高さとスクロールしている距離の合計が、
要素の高さ以上になった時に行うようにしていましたが、それだとわかりずらいので、プラス100しました。
プラス100だとちょっとかっこわるい気がしますが、、、
要素の高さを取得して、その半分の値を超えたらにしようかと思いましたが、
ちょっと断念しました。
プラグインだと、
いちいち要素毎で設定しなかったりしないといけないので、
これだと、クラスをつけるだけでOKなので、楽になりました。
ブラウザチェックをおこなっていないので、しっかり動くかはわかりません。。。
ただ、firefoxとchromeでなら大丈夫かと思います。
もっとかっこよくて、汎用性があるものを作っていきます！
それでは、また！
