スクロールでふわっとフェードするアニメーション

css/コーディング

ウェブページをスクロールすると文字や画像がふわっと表示されたらなんとなくオシャレ。実装もjQueryを使って比較的かんたんにできます。
先にコードからどうぞ。

HTML
<div class="fade">
  <img src="img/svg/....svg" alt="">
</div>
jQuery
jQuery(function ($) {
  scroll_fade(); //ページ読み込み時
      
  $(window).scroll(function () {
    scroll_fade(); //スクロール時
  });
      
     function scroll_fade() { //関数
      $('.fade').each(function () {
        var POS = $(this).offset().top;
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        if (scroll > POS - windowHeight) {
          $(this).addClass('fade_in').removeClass('fade');
        }
      });
    }
      });      
CSS

.fade {
  opacity: 0;
}
.fade_in {
  -webkit-animation: fadeIn 1s forwards !important;
          animation: fadeIn 1s forwards !important;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

ここまでスクロールすると、下の画像がふわっと出てくるはずです。

最初 .fade に対してopacity:0;を指定して消しておき、スクロールでアニメーションを付与したクラスをくっつけます。

はまった点:初期表示をdisplay:none;にするとアニメーションが意図通りにならない。display:none;からのopacityで表示はフェードがかからないので、初期表示はpacity:0;にする。


今回は最初のスクロールのとき一度だけふわっとさせたいだけなので、
jQueryの関数内で.fadeを外してしまいます。
そうでないと.fadeがあるかぎりずっと関数が働いてしまうので、パフォーマンスが良く無い。。と、ベテランの方から教えていただきました!
スクロールイベントは少しでも少なくしたいですもんね。参考になります^0^

タイトルとURLをコピーしました