【初心者向け】【コピペでOK】JavaScriptで最高頻度!?　スクロールでクラス付与!

みなさんこんにちは。エンジニアの人です。橋本です。
今回は初心者向けに、JavaScriptのおはなし。
実務で役立つJavaScriptをご紹介したいなぁと考えたところが発端でございます。行き着いた結論は、WEB制作の現場においてもっともよく使うJavaScriptを選定して紹介しよう...です！
社内でもちょこちょこヒアリングさせていただいたりして、【スクロールでクラスを付与(追加)する】スクリプトが筆頭に挙がりました。
これはWEB制作の現場でご活躍されている方は、かなりの確率で使ったことがあるのではないでしょうか。
具体的には、スクロールし一定位置まで来たら要素がフェードイン、のような処理ですね。
フェードイン自体はCSSで実装できると思いますが、画面の枠外でかっこよくふわっと出てきても悲しいですよね。
それをコントロールする目的は、ホームページをリッチにすることだと考えています。
でもちょっと初心者には難しい。
ということで今回はコピペで動くコードをご紹介させていただきつつ、初心者向けに仕組みについてきちんとご紹介させていただきます！

まずは仕組みから

コピペから欲しいと思った方もいらっしゃるかもですが、ここはノベルティのコラム。
しっかり学んでいただきたいという気持ちがございます。
ですので、まずは仕組みから。

1. 現在のスクロール総量を取得する
2. 動かしたい要素の高さを画面上から取得する
3. 上記の値を加算する(これで、動かしたい要素のページ上からの高さを算出します)
4. 画面の高さを取得する
5. スクロールの総量が、3の値と4の値を足した数より大きければ、要素を動かすためのクラスを付与(追加)する
6. スクロールするというイベントに対して実行する

ここで大きなポイントは、要素自体を動かすのは【CSSのアニメーションである】こと。
つまり、JavaScriptで管理しているのは、あくまでもクラスを付与(追加)するタイミングなんですね。
今回ご紹介する下記のソースをご利用いただければ、極論フェードインもマスクも、CSSアニメーションさえ作成していただければなんでも実装できるようになります。

公開ソースの使い方

今回ご紹介するソースは、画面20%をこえると対象要素にクラスが付与される仕組みとなっています。
また、html側でdata-scripttimeを指定すれば横並びの要素を遅延でフェードインさせたりすることも可能です。
こちらはミリ秒での指定になるので、jQueryのfadeInやSlideDownなどの要領でご利用ください。

[html]
<div class="fade-in" data-scripttime="0">hoge</div>
<div class="fade-in" data-scripttime="200">hoge</div>
<div class="fade-in" data-scripttime="400">hoge</div>

[JavaScript]
function targetAddClass(targetName, addClassName) {
    let target = document.querySelectorAll(targetName);
    target.forEach(function(elm) {
        const scriptTime = elm.dataset.scripttime;
        const rect = elm.getBoundingClientRect();
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const elmPosison = rect.top + scrollTop; 
        const windowHeight = window.innerHeight
        const delayHeightpx = windowHeight * 0.2;

        if (scrollTop > elmPosison - windowHeight + delayHeightpx) {
            let delay = scriptTime ? scriptTime : 0;
            setTimeout(function() {
                elm.classList.add(addClassName);
            }, delay);
        }

    });
}

window.addEventListener('scroll', () => {
    targetAddClass("fade-in", "is-active");
    targetAddClass("mask", "is-active");
}

更にステップアップしたい方は、Intersection Observerを使おう！

ただし、今回の実装はscrollイベントを用いているもので、軽くなるように作ってはいますがIntersection Observer APIのほうがよりさくさくで実装できる機能の幅も広いです。
※簡潔にですがIntersection Observerとは、要素を監視しその画面内出現に応じて色々な処理をするといったものです。
こちらについても、いずれ改めて初心者向けにご紹介させていただきますね。

まとめ

今回は、WEB制作におけるJavaScriptの高頻度なものをご紹介させていただきました。
この他にもたくさんありますが、まずはここからといった感じですね。
もちろんCSSアニメーションだとさくさく感がイマイチなぁと言った状況もあるかと思いますが、その時は別の手段を模索しましょう。
基本的にはこれでさまざまな素敵アニメーションが、エンドユーザーにリッチな形で届くはず。
他にも高頻度のJavaScriptについて、また機会を見つけてご紹介させていただきます！
それではまた！