スクロールしたら動くアニメーションを素のJavaScriptとCSSで実装

ウェブサイトを見ているとよく見かける、スクロールすると要素が動くアニメーション。ほとんどはjQueryが使われていますが、このサイトはjQuery使っていません。この実装はとても簡単で、jQueryを使うとより簡単になるという感じではありません。

jQueryを使うだけでGoogleの評価ツールLighthouseの点数が下がることも確認しています。IEの引退によって有難みが薄れているjQuery、個人的にはいつまでサポートがされるか分からないと思っています。

脱jQueryを進めましょう。

スクロールしたら動くデモ

次のデモはスクロールすると、div要素が二つ、それぞれフワッと浮き上がります。

See the Pen animation-when-scrolling-01 by Takahiro Inada (@tkhr1) on CodePen.

仕組み

特定のクラス名（デモでは「scroll-in」）が付与されている要素が表示領域に入ったら、特定のクラス名（デモでは「displayed」）を付与するということをJavaScriptで行っています。

displayedのクラス名が付いた要素にCSSでアニメーションを付けます。それにより、displayedのクラス名が付いた瞬間にそのアニメーションが動くので、スクロールして表示されたら、そのアニメーションが動くという仕組みです。

コード

HTML

<div class="boxes-wrapper">
  <div class="scroll-in box box-01"></div>
  <div class="scroll-in box box-02"></div>
</div>

CSS

.boxes-wrapper{
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-top: 300px;
}
.box{
   width: 30px;
   height: 30px;
   background-color: #333;
}
.box-02{
   margin-top: 100px;
}
.displayed{
   animation: fadeUp 1s forwards;
}
@keyframes fadeUp{
    0%{opacity:0; transform: translateY(0);}
  100%{opacity:1; transform: translateY(-100px);}
}

なお、ここではanimationプロパティを用いていますが、transitionプロパティで可能な表現であれば、transitionプロパティでも同様の変化はつけられます。

JavaScript

//クラス名が「scroll-in」の要素を取得
const objects = document.querySelectorAll('.scroll-in');

//スクロール感知で実行
const cb = function(entries, observer) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            entry.target.classList.add('displayed');//スクロール感知で「displayed」のクラス名を付与
            observer.unobserve(entry.target); //監視の終了
        }
    });
}
// オプション
const options = {
    root: null,
    rootMargin: "0px",
    threshold: 0
}

// IntersectionObserverインスタンス化
const io = new IntersectionObserver(cb, options);

// 監視を開始
objects.forEach(object => {
    io.observe(object);
});

• document.querySelectorAll()メソッドは同一のCSSセレクタの要素を配列で取得します。
• IntersectionObserver（交差オブサーバー）は、指定した範囲に非同期的に監視している対象の要素が入ってきたら処理を実行するJavaScriptのAPIです。比較的新しい仕様ですが、IEのない現在はブラウザのサポート状況を気にする必要はありません。scrollイベントを利用する従来の方法よりもパフォーマンスに優れます。

時間差をつけて順番に動作させたい場合

横並びの要素を時間差をつけて順番に動かしたい場合は、animation-delayあるいはtransition-delayを用います。

次のデモは、二つ目のdiv要素にanimation-delay: .2s;をつけただけです。

See the Pen animation-when-scrolling-02 by Takahiro Inada (@tkhr1) on CodePen.

色々なパターン

あとはアニメーションを横から動かしたり、透明度や色の変化を変えたり、アレンジ次第で様々なパターンが実現可能です。

色を変化

@keyframes fadeUp{
  0%{background-color: #ff1493; transform: translateY(0);}
100%{background-color: #4b0082; transform: translateY(-100px);}
}

上記のようなCSSだけで色を変化させることができます。

See the Pen animation-when-scrolling-03 by Takahiro Inada (@tkhr1) on CodePen.

回転

@keyframes rotate-01{
  0%{transform: rotate(300deg);}
100%{transform: rotate(0);}
}
@keyframes rotate-02{
  0%{transform: rotate(0);}
100%{transform: rotate(300deg);}
}

上記のようなCSSだけで回転させることができます。

See the Pen animation-when-scrolling-04 by Takahiro Inada (@tkhr1) on CodePen.

左右の動き

@keyframes fadeInLeft{
  0%{transform: translateX(-100px);}
100%{transform: translateX(0);}
}
@keyframes fadeInRight{
  0%{transform: translateX(100px);}
100%{transform: translateX(0);}
}

上記のようなCSSだけで左右の動きが付けられます。

See the Pen animation-when-scrolling-05 by Takahiro Inada (@tkhr1) on CodePen.

まとめ

ぜひぜひ、ご活用ください。