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

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コードの解説です。