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

フロントエンド | 2017.08.12

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

設定方法

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>

</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);
        });
      }
  });
});

$(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);

});

}

});