CSS変数による再利用可能な視差効果

CSS変数は、CSSとJavaScript間の情報を共有する非常にきちんとした方法を提供します.これらの2つをCSS変数に接続するperkは、それらにアクセスし、いつでもCSSとJSでそれらを変更することができます.
私は視差効果を使用していますが、これは多くのことがこれを使用することができます.半減期の視差効果は、ウェブサイトの背景が前景にあるものより遅いペースでスクロールするところです.つは、簡単に拡張することができますを構築しましょう.
私たちの例ではこのカードを使います.

まず最初にCSS部の世話をしましょう.

.card {
    --translate-y: 0px;
    --translate-x: 0px;
    transform: translate(var(--translate-x), var(--translate-y));

}

そこで、我々は2つのCSS変数を作成した.JavaScriptに移動しましょう.

関数の作成
私たちの関数には、いくつかのパラメータが必要です.要素は、翻訳する方向、水平方向または垂直方向、速度、および変換される値が負の数値である場合です.

parallax = (element, direction, speed, negative) => {}

翻訳される量は、どれくらいのページがスクロールされたかに依存します.私たちは、ウィンドウのPageyoffsetでこの量にアクセスすることができますが、それがスムーズに見て遅くするために、我々は少しこの量を減らす必要がありますここで私たちの速度が遊びに来るところです.また、負のパラメータを使用して負の数かどうかを決定する良い場所です.

let translate = window.pageYOffset * speed * (negative ? -1 : 1);

それから、我々は我々の望ましい方向と我々の計算された量に我々のCSS変数を更新する必要があるだけです.

element.style.setProperty(`--translate-${direction}`, `${translate}px`);

しかし、私たちが同時に複数の要素でこの機能を使用したいならば、どうですか?

parallax = (element, direction , speed , negative) => {
    let translate = window.pageYOffset * speed * (negative ? -1 : 1);

    if (element.length > 1) {
        element.forEach((el) => {
            el.style.setProperty(`--translate-${direction}`, `${translate}px`);
        });
    } else {
        element.style.setProperty(`--translate-${direction}`, `${translate}px`);
    }
};

最後に、ページがスクロールして関数を呼び出すときにのみ聞く必要があります.

const firstCard = document.querySelector('.cards-parallax .card');
const lastCard = document.querySelector('.cards-parallax .card:last-of-type');
const cards = document.querySelectorAll('.cards-parallax .card');
window.addEventListener('scroll', () => {
    parallax(firstCard,'y', 0.4, true);
    parallax(lastCard,'x', 0.5, false);
    parallax(cards,'x', 0.2, false);

});

クールなことは、スケールのような他の多くのプロパティのための同じテクニックに従うことができる、回転、不透明度も色があります.
こちらはDemoです