スクロールをすると様々なアニメーションがされるのが、多くのサイトで見受けられますが、

ちょっとしたものを自分でも作成してみました。

 

スクロールをすると、要素がふわっと表示されるものです。

説明ではわからないと思いますので、

デモをご覧ください。

DEMO

 

本当にちょっとしたものですが、ほんの少しだけアクセントになるんではないでしょうか。。。

 

以下方法です！

 

jQueryを使用していますので、

jqueryを読み込んで下さい。

 

 

HTML

 

XHTML

<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>

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

CSS

.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; }

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

JavaScript

$(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(); }); });

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でなら大丈夫かと思います。

 

もっとかっこよくて、汎用性があるものを作っていきます！

それでは、また！