【コピペで使える】スクロールでフェードインさせる使いまわし可能なJQuery実装サンプル

よくページをスクロールするとふわっとコンテンツ（文字や画像）が現れるお洒落な効果を見ると思います。

今回はこの効果を実現するための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の要素にクラス指定をすれば無制限に使えるので便利ですね。

是非活用してみてください。