千葉県船橋市のホームページ制作・マーケティングの株式会社ノベルティ

COLUMN

コラム

2022.03.04

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

橋本大地

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について、また機会を見つけてご紹介させていただきます!
それではまた!

橋本大地

プロジェクトリーダー

バックエンドを経てフロントエンドの世界へ
持ち前のポジティブさと細やかさでノベルティを救う☆
元気の源は愛妻弁当!
自家用マシンでMacbookを購入することを夢見ています。
HOME | コラム | 【初心者向け】【コピペでOK】JavaScriptで最高頻度!? スクロールでクラス付与!
CONTACT

お問い合わせ

お見積りの依頼やWEBに関する
お悩みがございましたら、
お電話かメールからお問い合わせください。

047-405-2227

お電話対応可能時間 平日/10:00~17:00

〒273-0005 千葉県船橋市本町5-1-1 船橋AUビル4階

船橋情報配信メディア

トコトコふなばし船橋情報配信メディア|トコトコふなばし

【船橋トコトコ大冒険メディア】として船橋の地域情報メディア、トコトコふなばしを運営。

船橋の観光スポットやイベント、グルメなど船橋の魅力を、熱く!ディープに!紹介しています。

また、船橋で活躍されている個人・企業の皆様への取材も実施しています。

船橋情報配信メディア|トコトコふなばしのとこっとちゃん

トコトコふなばしのキャラクター

とこっとちゃん

船橋に迷い込んでから船橋が気に入ってしまったトコ!

船橋を散歩しながら船橋のいいトコを紹介しているトコ。

船橋市内での取材はボクも行くトコよ~♪