【JS】スクロールに合わせてテキストが左右に流れて動く実装方法

この記事タイトル見て「あ!画像がゆっくり横ループするやつね!」と、イメージする人が多いんじゃないでしょうか。以下のように↓

チビネ

いやー…それじゃなくてこういうの笑↓

今回解説します「スクロールに合わせてテキストが左右に移動する」イメージ動画です。

フォントスタイルやカラー変更することで、お堅いコーポレートサイトからカジュアルサイトまで幅広く合わせらそうですね。

では、早速コードを見ていきましょう!

目次

コード解説

スクロール時にテキストを流れるように横移動させる

See the Pen Untitled by D Hiyoshi (@D-Hiyoshi) on CodePen.

CSSはほぼノータッチ。JavaScriptも長い方ではないため、理解しやすいと思いますよ!

チビネ

なるべく初心者にも分かるよう解説モトム

では早速、ソースコードを分解して解説していきます。

JavaScriptコード解説


/*-------------------------------------------------------------
 スクロールに合わせてテキストが横に移動
-------------------------------------------------------------*/
jQuery(function($) {
    const text = document.getElementById("scrolling-text");

    // テキストの初期位置設定
    let direction = "left";
    text.style.top = "0";
    text.style.left = "-300%"; // 初期位置を指定

    window.addEventListener("load", () => {
        // テキストのフェードイン効果
        setTimeout(() => {
            text.style.opacity = 0.6;
        }, 100);
    });

    let currentPosition = 0;
    let lastScrollY = 0;
    let isScrolling = false;

    function updatePosition() {
        // テキストの新しい位置を計算
        const newPosition = window.scrollY * (direction === "left" ? -1.5 : 1.5) / 2;
        currentPosition = newPosition;
        text.style.transform = `translateX(${newPosition}px)`;
    }

    function applyInertia() {
        isScrolling = false;
    }

    function onScroll() {
        const scrollY = window.scrollY || window.pageYOffset;

        if (scrollY === 0) {
            // スクロールが一番上まで戻った場合、テキストを画面上に設定
            direction = "left";
            text.style.transform = "translateY(-100%, -50%)";
        } else {
            // スクロール中はテキストを画面外に移動
            direction = "right";
            text.style.transform = "translate(-100%, -50%)";
        }

        if (!isScrolling) {
            isScrolling = true;
            requestAnimationFrame(() => {
                updatePosition();
                isScrolling = false;
            });
        }

        lastScrollY = scrollY;
    }

    window.addEventListener("scroll", onScroll);

    // ページ読み込み時にテキストを表示する ※CSSで0.3秒遅れて表示
    text.style.display = "block";
});
  • jQuery(function($){ ... });
    • jQueryを使用していることを示す記述です。$はjQueryオブジェクトを参照するためのショートカットです。
      ※WordPressの場合、$(function() {jQuery(function($) {に変更ください。
  • const text = document.getElementById("scrolling-text");
    • scrolling-textというIDを持つ要素を取得し、textという変数に格納しています。
  • let direction = "left";
    • テキストの移動方向を示す変数directionを定義し、初期値を左方向に設定しています。
  • text.style.top = "0";
    • テキスト要素のtopプロパティを0に設定して、上端に配置されるようにします。
  • text.style.left = "-300%";
    • テキスト要素のleftプロパティを-300%に設定して、初期位置を画面外(左側)に配置します。
  • window.addEventListener("load", () => { ... });
    • ページの読み込みが完了した際に実行されるイベントリスナーを登録しています。
    • テキスト要素に対して0.6秒後にフェードイン効果を与える処理が含まれています。
  • let currentPosition = 0;
    • テキスト要素の現在の位置を保持する変数currentPositionを初期化しています。
  • let lastScrollY = 0;
    • 前回のスクロール位置を保持する変数lastScrollYを初期化しています。
  • let isScrolling = false;
    • スクロール中かどうかを示すフラグ変数isScrollingを初期化しています。
  • function updatePosition() { ... }
    • テキストの位置を更新するための関数です。
    • スクロール量に応じてテキストの新しい位置を計算し、translateXを使用して位置を設定します。
  • function applyInertia() { ... }
    • 慣性効果を適用するための関数です。
    • このコードでは使用されていません。
  • function onScroll() { ... }
    • スクロールイベントが発生した際の処理を行う関数です。
    • スクロール位置に応じてテキストの移動方向や位置を設定し、updatePosition()を呼び出して位置を更新します。
  • window.addEventListener("scroll", onScroll);
    • スクロールイベントが発生した際にonScroll()関数を実行するイベントリスナーを登録しています。
  • text.style.display = "block";
    • ページ読み込み時にテキストを表示するための設定です。
    • displayプロパティをblockに設定することで、テキストを表示します。

以上がJavaScriptコードの解説です。

CSSコード解説

.scrolling-text {
    position: absolute; /* テキストの位置を絶対位置に設定 */
    top: 0; /* 上端からの距離を0に設定 */
    left: 0; /* 左端からの距離を0に設定 */
    transform: translate(-100%, -50%); /* テキストを左側に移動して中央揃え */
    white-space: nowrap; /* テキストが改行されないように設定 */
    margin-bottom: 196px; /* 下方向のマージンを設定 */
    line-height: 1; /* テキストの行の高さを設定 */
    font-size: 64px; /* テキストのフォントサイズを設定 */
    font-family: 'Ubuntu', sans-serif; /* テキストのフォントファミリーを設定 */
    transition: opacity 1s ease-out; /* テキストの透明度変化に1秒のトランジション効果を設定 */
}

上記のCSSコードは、以下のような役割と設定を持っています。

  • position: absolute;:テキストの位置をページ上の絶対位置で指定します。この場合、他の要素に影響を受けず、自由な位置に配置されます。
  • top: 0;:テキストの上端がページ上端に対して0の位置に配置されます。
  • left: 0;:テキストの左端がページ左端に対して0の位置に配置されます。
  • transform: translate(-100%, -50%);:テキストを左側に移動させ、垂直方向に中央揃えにします。-100%の指定により、テキストは左端から完全に見えなくなります。
  • white-space: nowrap;:テキストが自動的に改行されないように設定します。テキストが水平方向に一直線に表示されます。
  • margin-bottom: 196px;:テキストの下方向のマージンを設定します。これにより、テキストの下部に余白が作られます。
  • line-height: 1;:テキストの行の高さを設定します。ここでは、1の値が指定されており、テキストのフォントサイズに応じて適切な行の高さが設定されます。
  • font-size: 64px;:テキストのフォントサイズを設定します。ここでは、64ピクセルのサイズが指定されています。
  • font-family: 'Ubuntu', sans-serif;:テキストのフォントファミリーを設定します。ここでは、’Ubuntu’というフォントが指定され、もし’Ubuntu’が利用できない場合には代替のサンセリフフォントが使用されます。
  • transition: opacity 1s ease-out;:テキストの透明度の変化に対して、1秒の時間をかけてスムーズに変化させるトランジション効果を設定します。

以上がCSSコードの解説です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次