サイトを表示した時に、スクロール量に応じて要素をフェードイン表示させる方法を紹介したいと思います。スクロールして要素が可視範囲に入ったら、フェードインしてふわっと表示させます。
挙動については、デモページを用意しましたので、以下リンクよりご確認ください。
スクロールした時に要素が可視範囲に入ったらフェードイン表示させる方法
まずは、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>
あとがき
とても簡単に実装できますので、スクロールした時にアニメーションしながら要素を表示させたい時は、ぜひ参考にしていただければと思います。