CSSアニメーションとjQueryを使って要素にスクロールアニメーション効果を加える方法

CSSアニメーションとjQueryを組み合わせて、スクロール時のアニメーション効果を自前で実装する方法をご紹介いたします。

簡単なデモページも用意しましたので、挙動についてはデモをご参照ください。下にスクロールしていくと、アニメーションしながら要素が表示されます。

デモページを見る

CSSアニメーションとjQueryを使って要素にスクロールアニメーション効果を加える方法

ステップ1. HTMLのマークアップ

HTML側はシンプルで、パララックス効果を加えたい要素に「animate」というクラスを指定するだけです。

<p class="animate"><img src="sample.jpg"></p>
<div>
  <h2 class="animate">タイトル</h2>
  <ul>
    <li class="animate">リスト1</li>
    <li class="animate">リスト2</li>
    <li class="animate">リスト3</li>
  </ul>
</div>

クラス名は変更してもOKです。クラス名を変更する場合は、CSS側のクラスも変更してください。

ステップ2. CSSアニメーションの定義

続いて、CSS側では、以下のように指定します。

.animate {
  visibility: hidden;
}
 
.animate.-in {
  animation: in 1.5s both;
  visibility: visible;
}
 
.animate.-in:nth-of-type(2) {
  animation-delay: .2s;
}
 
.animate.-in:nth-of-type(3) {
  animation-delay: .4s;
}
 
.animate.-in:nth-of-type(4) {
  animation-delay: .6s;
}
 
@keyframes in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

予め.animateを非表示にしておき、.-inというクラスが追加されたら、アニメーションしながら要素が表示されます。アニメーションでは、20px要素をずらし要素を透明にした状態から、元の位置に戻しながら透明度を解除しています。この処理によってフェードイン表示を実現しています。

「.animate.-in:nth-of-type(2)～(4)」の部分は、同セクション内の要素の数によって遅延を発生させています。上記HTMLの例だと、リスト1が表示されて200ミリ秒後にリスト2が、400ミリ秒後にリスト3が表示されます。この遅延処理によって、同じ領域内にある要素でも徐々に表示していくことが可能になっています。

ステップ3. jQuery本体の読み込みとスクリプトの実行

最後にjQuery本体を読み込んで、スクリプトを実行します。記述する場所は</body>の直前でOKです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(window).on('load scroll', function () {
  scrollEffect();
});

function scrollEffect() {
  $('.js-animation').each(function () {
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > elemPos - windowHeight + 100) {
      $(this).addClass('-in');
    }
  });
}
</script>

まず、ページがロードされた時にscrollEffect()を実行し、既に可視範囲に入っている要素を表示させています。これをやっておかないと、スクロールするまでファーストビューの要素も表示されません。

ページをスクロールして要素が可視範囲に入ったら「-in」クラスを追加しています。

上記の場合、要素の表示領域100pxまでスクロール位置が来たらクラスを追加する、という内容になります。もっと早くもしくは遅く要素を表示させたい場合は、「windowHeight + 100」の100を50や200などに変更し調整してください。

あとがき

ScrollRevealなどのスクリプトを導入すれば、簡単にスクロールアニメーションを実装することができますが、自前でも割と簡単にできちゃいますので、よかったら参考にしていただけると幸いです。

スクロールアニメーションを実装できるスクリプトを探しているけど、なかなか好みのものが見つからないという場合は、自前で追加しちゃいましょう。