スクロールしてコンテンツ要素が表示されたとき順番にフェードインさせる方法

2017/08/12
  • css
スクロールしてコンテンツ要素が表示されたとき順番にフェードインさせる方法

今回は、スクロールしてコンテンツ要素が表示されたとき順番にフェードインさせる方法をご紹介したいと思います。

設定方法

HTML

<ul class="list">
  <li><img src="img/img01.jpg"></li>
  <li><img src="img/img02.jpg"></li>
  <li><img src="img/img03.jpg"></li>
  <li><img src="img/img04.jpg"></li>
</ul>

jQuery(JavaScript)

$(document).ready(function(){
    var EffectTime = 500;
    var DelayTime = 500;
    $('.list li').css({ opacity: 0 });
    $(window).on('scroll load', function() {
      var scMiddle = $(this).scrollTop() + $(this).height() / 2;
      var listPos = $('.list').offset().top;
      if ( listPos < scMiddle ) {
        $('.list li').each( function(index) {
          $(this).delay(DelayTime * index).animate({'opacity': 1}, EffectTime);
        });
      }
  });
});