Javascriptでスクロールイベントを発火させる方法と実用例

スクロールイベントって、実はとても身近な技術です。

Webサイトを見ているとき、私たちはほとんど無意識にスクロールしていますよね。でもその裏では、ページのあちこちで小さな演出が動いています。

とくに商品のランディングページでは、もはや「あって当然」。 必須技術と言ってもいいくらい、自然に溶け込んでいます。

私が初めて心をつかまれたのは、サントリーの「こだわり酒場のタコハイ」のランディングページ。

スクロールするたびに、まるで居酒屋の中へ入っていくような感覚。 色づかいも動きも全部が美味しそうで、 「もっと知りたい」と思わせる力がありました。

あのとき、「動きって、こんなに人の気持ちを動かすんだ」と感動を覚えました。

スクロールイベントは、JavaScriptを使って実装します。

やっていることは意外とシンプルです。

まず、JavaScriptで 「画面の状態」を監視 します。スクロール位置や、要素が画面内に入ったかどうかをチェックします。

そして、

「この位置まで来たら、アニメーションを開始する」

「この要素が見えたら、クラスを追加する」

というように、条件と動きをあらかじめ決めておく。

HTMLとCSSで土台をきちんと作っておいて、 そこに“きっかけ”を与えるのがJavaScriptの役割です。

window.addEventListener("scroll", function () {
    const scrollY = window.scrollY;
    const windowHeight = window.innerHeight;
    const revealItems = document.querySelectorAll(".reveal");

    revealItems.forEach(function (revealItem) {
        const itemTop = revealItem.offsetTop;

        if (scrollY + windowHeight > itemTop) {
            revealItem.classList.add("is-visible");
        }
    });
});

「スクロール」されたときに実行してください！

    const 今どれだけ下にいる？ = window.scrollY
    const 画面の高さは？ = window.innerHeight
    const 表示させたい要素を全部集める = document.querySelectorAll(".reveal")

    その要素たちを1個ずつチェックする {

        const その要素の位置 = revealItem.offsetTop

        もし
        （今のスクロール位置 + 画面の高さ）が
        その要素の位置を超えたら

            「表示するクラス」を追加する
    }
                

では、具体的な活用例を見てみましょう。

• その1 アンダーライン演出

スクロールに合わせて、文章にスッと アンダーラインが引かれていく演出です。

まるで教科書を読みながら、大事なところに蛍光ペンを引いているように、自然と視線を誘導できます。

ユーザーにとっては 自然で親しみやすい体験。制作者側としても、「ここは注目してほしい」というポイントをやさしく伝えることができます。

動きは派手ではありませんが、ちゃんと印象に残る、さりげないのに丁寧な演出です。

• その2 画像のフェードイン

スクロールすると、画像がふわっと現れる演出です。





かなりよく見る定番のテクニックです。

最初は opacity: 0; にしておき、 画面内に入ったらクラスを付けて opacity: 1; に変化させます。 そこに transition を組み合わせれば、自然なフェードインが完成です。

一度に全部を見せるのではなく、タイミングをコントロールできます。小さな動きですが、ページにリズムが生まれます。

それだけで、情報の伝わり方が変わります。ぐっと、洗練された印象になります。

• その3 TOPに戻るボタン

ページをある程度スクロールすると、右下に「TOPへ戻る」ボタンが現れる演出です。

ユーザーにとっては、地味に嬉しい機能です。

演出というよりは、やさしさ。この小さな気配りがサイトの印象付けます。

最後に。私たちは今、Webサイトを見ています。 紙の広告や取扱説明書を読んでいるわけではありません。

デジタルだからこそ、動きをあしらえる。ユーザーを飽きさせない。離脱させない。もっと知りたくなる体験をつくれる。

スクロールイベントは、そのための一つの手段です。

小さな演出でも、あるとないとでは印象が違う。 そしてその積み重ねが、サイト全体の価値をつくる。市場価値が高まっている今、目を引くだけでなくユーザーにとってやさしいサイトをつくれる技術を身につけたいと考えます。

まだまだ勉強中だけれど、 一つずつ、ちゃんと積み重ねていきたいです。

がんばります！