スクロールした時に要素が可視範囲に入ったらフェードイン表示させる方法

スクロールした時に要素が可視範囲に入ったらフェードイン表示させる方法

スクロールした時に要素が可視範囲に入ったらフェードイン表示させる方法

サイトを表示した時に、スクロール量に応じて要素をフェードイン表示させる方法を紹介したいと思います。スクロールして要素が可視範囲に入ったら、フェードインしてふわっと表示させます。

挙動については、デモページを用意しましたので、以下リンクよりご確認ください。

デモページを見る

スクロールした時に要素が可視範囲に入ったらフェードイン表示させる方法

まずは、jQueryと以下スクリプトを読み込みます。


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function(){
$('.effect').css("opacity",".3");
$(window).scroll(function (){
 $('.effect').each(function(){
 var ef = $(this).offset().top;
 var sc = $(window).scrollTop();
 var wh = $(window).height();
 if (sc > ef - wh + 100){
 $(this).animate({ 
 "opacity": "1"
 }, 1000);
 }
 });
});
});
</script>

「$(‘.effect’).css(“opacity”,”.3″);」で透過度を0.3にしておいて、「$(this).animate({ “opacity”: “1” }, 1000);」でアニメーションさせながら透過度を1に戻しています。これにより、要素がふわっと表示されます。

あとは、フェードイン表示させたい要素に”effect”クラスを付与するだけです。デモサイトでは、以下のようにそれぞれの要素にeffectクラスを付けています。


<div class="effect">
 <h2>コンテンツ1</h2>
 <img src="images/content1.jpg" alt="">
</div>
<div class="effect">
 <h2>コンテンツ2</h2>
 <img src="images/content2.jpg" alt="">
</div>

あとがき

とても簡単に実装できますので、スクロールした時にアニメーションしながら要素を表示させたい時は、ぜひ参考にしていただければと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です