【JavaScript】スクロールで出現するアニメーションの実装方法【IntersectionObserver】

今回はスクロールに応じて様々な要素が出現するアニメーションの実装方法です。
IntersectionObserverを使うことで実装することができます。

サンプルコードの使い方
IntersectionObserverってこーんな感じです。
IntersectionObserverの使い方
- サンプルコード
別のソースコードに実装！使いまわす方法！

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。

それでは本文へ、レッツゴー！

IntersectionObserverってこーんな感じです。

要素が画面内に入ることで、フェードインします。

IntersectionObserverの使い方

まずはサンプルコードを丸ごとコピペするところから始めましょう。

このサンプルコードから必要な部分を抜き出すことで、別のソースコードにも使いまわせるコードになっています。

サンプルコード

<style>
    /* ここからの記述は実際に使う場合は不要 */
    p{
        display: inline-block;
        width: 300px;
        height: 100px;
        margin: 0 auto;
        font-size: 20px;
        font-weight: bold;
        background-color: #ccc;

        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* ここまでの記述は実際に使う場合は不要 */

    .scrollanime{opacity: 0;}
    .fadein{animation: fadein 1s forwards;}
    @keyframes fadein{
        0%{opacity: 0;}
        100%{opacity: 1;transform: translate(0) scale(1) rotate(0);}
    }

    .toup{transform: translateY(100px);}
    .todown{transform: translateY(-100px);}
    .toright{transform: translate(-100px);}
    .toleft{transform: translateX(100px);}
    .expansion{transform: scale(.5);}
    .shrink{transform: scale(1.5);}
</style>

<div style="height: 500px;"></div>
<p class="scrollanime">スクロールするとでてくるよ！</p>
<div style="height: 500px;"></div>
<p class="scrollanime todown">上から出たり</p>
<div style="height: 500px;"></div>
<p class="scrollanime toup">下から出たり</p>
<div style="height: 500px;"></div>
<p class="scrollanime toright">左からも出ちゃったり</p>
<div style="height: 500px;"></div>
<p class="scrollanime toleft">右からも出ちゃったり</p>
<div style="height: 500px;"></div>
<p class="scrollanime expansion">こんなかんじや</p>
<div style="height: 500px;"></div>
<p class="scrollanime shrink">こーんなかんじも</p>
<div style="height: 500px;"></div>

<script>
    // オプション
    const options = {
        // 要素が画面内に100px入った時点で発火する
        rootMargin: "0px 0px -100px 0px",
    };

    /* 
    ** フェードインさせたい要素に .scrollanime を追加する
    **
    ** 同要素に下記のクラスを追加することでフェードイン時のアニメーションが変わる
    ** .toup : 下から出てくる
    ** .todown : 上から出てくる
    ** .toright : 左から出てくる
    ** .toleft : 右から出てくる
    ** .expansion : 拡大しながら出てくる
    ** .shrink : 縮小しながら出てくる
    */

    const scrollanime = document.querySelectorAll('.scrollanime');

    const iocb = function(entries, observer){
        entries.forEach(entry => {
            if(entry.isIntersecting){
                entry.target.classList.add('fadein');
                // 下記のコメントアウトを外すとアニメーションを繰り返さなくなる
                // observer.unobserve(entry.target)
            }else{
                entry.target.classList.remove('fadein');
            }
        });
    };

    const io = new IntersectionObserver(iocb, options);
    for( i=0 ; i < scrollanime.length ; i++ ){
        io.observe(scrollanime[i]);
    }
</script>