サイトを表示した時に、スクロール量に応じて要素をフェードイン表示させる方法を紹介したいと思います。スクロールして要素が可視範囲に入ったら、フェードインしてふわっと表示させます。
挙動については、デモページを用意しましたので、以下リンクよりご確認ください。
スクロールした時に要素が可視範囲に入ったらフェードイン表示させる方法
まずは、jQueryと以下スクリプトを読み込みます。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 | <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クラスを付けています。
1 2 3 4 5 6 7 8 | < 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 > |
あとがき
とても簡単に実装できますので、スクロールした時にアニメーションしながら要素を表示させたい時は、ぜひ参考にしていただければと思います。