jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法

jQueryを使わずにスクロールアニメーションを実装する方法をご紹介いたします。スクロールしていって可視範囲に要素が入ったら、ふわっとアニメーションしながら表示させます。

意外とコード量は少なくて済むので、スクロールアニメーションを実装する際はjQueryに依存しなくても良いのかなと思います。

素のJavaScriptとCSSでスクロールアニメーションを実装する方法

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

HTMLでは、アニメーション表示したい箇所に.animateを追加します。

<div class="animate">
  スクロールアニメーション要素
</div>

<ul class="list">
  <li class="animate">スクロールアニメーション要素1</li>
  <li class="animate animate2">スクロールアニメーション要素2</li>
  <li class="animate animate3">スクロールアニメーション要素3</li>
</ul>

.animate2と.animate3は、タイミングをずらして表示するためのクラスです。.animate→.animate2→.animate3の順番で表示するようにCSSで指定します。

ステップ2. CSSで表示する時のアニメーションを指定

続いて、CSSで要素を表示する時のアニメーションを指定します。

.animate {
  visibility: hidden;
}

.animate.is-show {
  animation: show 1s both;
  visibility: visible;
}

.animate2.is-show {
  animation-delay: .2s;
}

.animate3.is-show {
  animation-delay: .4s;
}

@keyframes show {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animateは非表示にしておき、.is-showが付いたらアニメーションしながら表示します。30px下にずらしていた要素が元の位置に戻りながら、下から上にふわっと表示されます。

.animate2と.animate3は、animation-delayで表示タイミングをずらしています。

ステップ3. JavaScriptで要素が可視範囲に入ったらクラスを追加

.is-showの追加処理はJavaScriptで実装します。

<script>
let scrollElem = document.querySelectorAll('.animate');
let scrollAnimation = function() {
  for(let i = 0; i < scrollElem.length; i++) {
    let trigger = 50;
    if (window.innerHeight > scrollElem[i].getBoundingClientRect().top + trigger) {
      scrollElem[i].classList.add('is-show');
    }
  }
}
window.addEventListener('load', scrollAnimation);
window.addEventListener('scroll', scrollAnimation);
</script>

「document.querySelectorAll(‘.animate’)」で.animateの要素を取得します。

getBoundingClientRect().topでブラウザ上部からその要素までの距離を取得しています。そこにtriggerの値(上記の場合は50px)を追加し、window.innerHeight(ブラウザ内の高さ)と比較することで、その要素が画面内に50px入ったら表示させています。triggerの値を変更することで、もっと遅くしたり早くしたりできます。

「window.addEventListener(‘load’, scrollAnimation);」と「window.addEventListener(‘scroll’, scrollAnimation);」で、ページ読み込み完了時とスクロール時にスクリプトを実行させるという処理になっています。

ページ読み込み完了時にも処理を実行することで、既に画面内に収まっている要素をまずは表示させる感じですね。これをやっておかないとスクロールが開始されるまで要素が表示されません。

あとがき

jQueryを使った実装方法については、「CSSアニメーションとjQueryを使って要素にスクロールアニメーション効果を加える方法」という投稿で紹介しています。見比べてみると、jQueryよりもコード量は少ないですね。

jQueryに依存させたくない時は、ぜひ参考にしていただければと思います。