【Web制作Tips】JavaScriptでスクロール連動コンテンツを作ろう

Web制作初学者のなかには、HTMLやCSSに少し慣れてきたら、早速学習内容をJavaScriptにシフトする方もいると思います。
JavaScriptの基礎を学ぶことも大事だが、今学んだ知識はWeb制作において具体的にどんな役に立つのか、最初のうちは見えにくく感じることもあります。

近年のWebページ上で、リッチなUXを実現するには心地いいアニメーションを実装することが一般的となってきました。
今回はJavaScript＋jQueryを使って、色々なWebサイトでよく見るスクロール演出の作り方をご紹介いたします。

スクロール演出（エフェクト）について

Webサイトのスクロール演出とは、クライアント側のブラウザ上でページスクロールと共に、ページ内の要素が一緒に変化する仕様のことを指します。インタラクティブな体験はコンバージョンにも繋がりますので、こうしたスクロール連動コンテンツは「もっと知りたい」「続きが見たい」のようなUXをもたらしてくれます。

上の画像のように、スクロール演出において最近のWebサイトには様々な場面で実装されています。

成果物イメージ・プレビュー

今回作成す演出内容は主にスクロールで制御する方法と検証となりますので、アニメーションは簡単なもので作ってしていきます。先ずは実際に用意したサンプルを見ていきましょう。

See the Pen 【JS Tips】ScrollEffect by Compy_Web (@compy-web) on CodePen.

ただfadeIn/fadeOutのように、非常にシンプルなエフェクトを演出しているだけですが、アニメーションのON/OFFを制御するには、JavaScriptでスクロール時の情報を取得したうえ、幾つか計算をさせる必要があります。
早速、作成の方法を見ていきましょう。

作成手順と仕組み

CSSの解説について一部割愛しますが、必要な場合はこちらからコードの詳細を確認してください。

STEP 1．演出要素とコンテンツ構造の確定
先ずはHTMLで配置する要素を決めて、レイアウトを構築する
STEP 2．演出要素を選択する
JavaScriptで該当要素の呼び出すと、処理内容を記述する
STEP 3．アニメーションの演出内容を作る
CSSでアニメーションを設定する
STEP 4．演出のタイミングと発動条件を書く
スクロールによる演出は、どの様な状況で実行させるのかを設定する

コーディング1：HTML＋JavaScript(jQuery)

前述した通り、今回のポイントはJavaScriptの部分になりますので、HTMLとCSSのコードを最小限にします。ここでは簡単な段落ブロック(articleタグ)とコンテナ(sectionタグ)を使った土台を用意します。今回は動き検証ということもあり、flexボックスレイアウトで段落の位置を上下・左右中央揃えにしました。

<article class="fadeInBefore">
<h3>Title</h3>
<p>Message</p>
</article>
</section>

次は、JavaScriptでclass名が「fadeInBefore」になっている要素を呼び出していきます。
要素が一つ以上の場合、「.each()」を使って「for」文を書きます。さらに「.on()」で処理開始のイベント「scroll」を記述します。
ひとまず下記のように書けたら、次のステップを見ていきましょう。

$(window).on("scroll", function () {
    $(".fadeInBefore").each(function () {
    //後程ここにコードを追加していきます
    });
  });

コーディング2：CSS

先程のHTML/JavaScriptで設定した演出要素「.fadeInBefore」のスタイルを設定していきます。
一定の高さまでスクロールしなければ表示させない仕様を作りたいので、非表示状態のスタイルを下記のように書きます。

.fadeInBefore {
      opacity: 0;
      transition-duration: 1s,0.6s;
      transition-property: opacity, transform;
      transition-timing-function: ease-out;
    }

続けて、目標の高さまでスクロールした場合付与するclass名を「fadeInAfter」とし、「fadeInAfter」のスタイルを追記していきます。ここでは、「非表示」⇒「表示」の演出を分かりやすくする為、不透明度に加えて移動のアニメーションも追加していきます。
例えば、ページ左側/右側/下部から移動しながら表示されるエフェクトなどは簡単に書けます。

/* Scroll-Before */
    .fadeInDown{
    transform: translate(0, 50%);
    }
    .fadeInLeft {
    transform: translate(-50%, 0);
    }

    .fadeInRight {
    transform: translate(50%, 0);
    }

    /* Scroll-After */
    .fadeInAfter {
    transform: translate(0);
    opacity: 1;
    }

※段落の中身はタイトル＋本文のみを用意したのですが、画像の追加またはCSSなどはプラスαで設定してみてください。

コーディング3：JavaScript(jQuery)

今度は、「.fadeInBefore」の要素に「.fadeInAfter」を追加する条件(タイミング)を考えていきます。
class追加の発動条件は、「ページの特定の高さまでにスクロールする」になりますので、この「特定の高さ」を計算する為の情報は下記の通りです。

演出要素（各アイテム）「top」のy軸座標（ページにおいての絶対位置:高さ）
現在ユーザーのスクロール(縦方向)座標
※補足：この値は即ち、(現在表示出来た領域の高さ - ブラウザウインドウの高さ) となります。
ユーザーのブラウザウインドウの高さ

後程変数としてを宣言しJavaScriptで取得していきますので、それぞれ「itemHeight」、「scrollFromTop」、「windowHeight」と命名します。

最後に、前のセクションでご紹介した発動内容と、実際スクロール時にどのタイミングで発動するのかを記述します。図解にも書かれている通り、ここはIF文を使うことになります。「scrollFromTop + windowHeight」が「itemHeight」と同じくらいの時に発動すればいいのではないか、と思われがちですが、それではユーザーが演出をほぼ見ることなくコンテンツが表示されてしまいます。
なので、「コンテンツ実際の高さ：「itemHeight」に、「一定の高さ」を足せば理想な演出をしてくれます。
今回は「windowHeight」の0.4個分を「itemHeight」にプラスします。

if (itemHeight < scrollFromTop + windowHeight * 0.6) 
      { $(this).addClass("fadeInAfter"); } 
      else {
        $(this).removeClass("fadeInAfter");

もう一度プレビュー画面を見てみましょう。

See the Pen 【JS Tips】ScrollEffect by Compy_Web (@compy-web) on CodePen.

スクロールイベントによるコンテンツの演出が以上の通りになります。
Webサイト上でJavaScriptの機能を体感するのに、比較的に簡単な例となりましたが、CSSのアニメーション機能と組み合わせて様々なエフェクトや演出が出来るようになりますので、ぜひ試してみてください。

Webサイトコーディング・制作講座

全 10 回の受講により、HTML・CSS(Sass)・JavaScript(jQuery)を基礎から学び、１つのWebサイトを最終的に完成していきます。
講座には無料体験を実施しており、将来Webデザインを副業にしたい方や、Webクリエイター志望の方、更に自社でHP作成をご検討の方にもぜひ受講していただき、受講を通してご自身のお悩みをお聞かせください。

学んで創造するメタバース