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

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

スクロールした時に要素が可視範囲に入ったらフェードイン表示させる方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加

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

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

デモページを見る

スポンサードリンク

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

まずは、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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。