パララックス

練習でパララックスを実装しました。
社内ではライブラリを使用して実装することが多いのですが、vanillaJSでの実装にチャレンジしてみました。
chatGPTにソースレビューをしてもらいながら進めています。

※PCの表示のみ整えているため、SPでは崩れてしまいますがご了承ください。(後日調整予定)

<div class="c-img js-parallax"></div>
<!-- [/c-img] -->

.c-img {
    width: 100%;
    height: 400px;
    background-image: url(https://placehold.jp/1440x700.png);
    background-position: center 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

document.addEventListener('DOMContentLoaded', function () {
    'use strict';

    const bgParallaxElements = document.querySelectorAll('.js-parallax');

    window.addEventListener('scroll', function () {
        const winH = window.innerHeight,
            y = window.scrollY;

        bgParallaxElements.forEach(function (bg) {
            const bgTop = bg.getBoundingClientRect().top + window.scrollY,
                parallaxMargin = 20,
                startBg = bgTop - winH - parallaxMargin, // ビューポート内に要素が到達する前にパララックス効果が開始される距離（ピクセル単位）
                parallaxCoefficient = 0.15; // パララックス効果の速度を調整する係数

            if (y >= startBg && y <= bgTop + bg.clientHeight) {
                bg.style.backgroundPositionY =
                    -(y - startBg) * parallaxCoefficient + 'px';
            } else {
                // 要素がビューポート外に移動した場合、background-position の変更を停止
                bg.style.backgroundPositionY = 'center';
            }
        });
    });
});