【コピペで使える】スクロールでフェードインさせる使いまわし可能なJQuery実装サンプル
tasanよくページをスクロールするとふわっとコンテンツ（文字や画像）が現れるお洒落な効果を見ると思います。
今回はこの効果を実現するためのJQueryの実装方法について紹介します。
こういった動きのある効果をアニメーション効果と言いますが、アニメーション効果はコンテンツを目立たせるためにありますので、いくらお洒落だからといってすべてのコンテンツをアニメーションさせると逆効果ですので、使い方には注意をしてください。
あくまでも目立たせたい部分に限定して使うのがお勧めです。
HTML
<div class="opacity0 fadein">コンテンツ</div>フェードインしたい要素にopacity0とfadeinのクラス指定をしておきます。フェードインするために最初に対象の要素を透明にし、その後にフェードインさせるためです。
CSS
<style>
<--
.opacity0 { opacity:0; }
-->
</style>
要素を透明にしておくためのクラスです。
JQuery
<script>
<--
$(function(){
$(window).scroll(function (){
$(".fadein").each(function(){
var imgPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > imgPos - windowHeight + windowHeight/5){
$(this).animate({ opacity: 1 }, { duration: 1000, easing: 'linear' });
}
});
});
});
-->
</script>
fadeinクラスが指定された要素に対して、透明度を時間をかけて0から1にし表示させる処理をしています。これによってフェードインのアニメーションを実現します。
まとめ
opacity0のCSSとJQueryのスクリプトを設置しておけば、あとはHTMLの要素にクラス指定をすれば無制限に使えるので便利ですね。
是非活用してみてください。
Follow me!
