1

現在、サイトのホームページにフルスクリーンのヒーロー画像スライドショーがあります。スクロール位置を取得し、それを 1.5 で割り、視差効果を引き起こす画像の transformY 位置を設定する JavaScript 効果があります。

ここに私が現在持っているコードがあります:

$(window).on("load scroll resize", function () {
    $("form:not(.blive_PageEdit) .hero-img .blive_Control img").css({ "margin-top": $(window).scrollTop() / 1.5 });
});

これは私が望むように機能しますが、特にジャダー効果を引き起こす非同期スクロールをサポートするブラウザーでは、パフォーマンスが大きな問題になることに気付きました。

私が知りたいのは、これを実装するためのより良い方法があるかどうかです? 完璧なのは次のようなものですが、CSSだけではこれが可能だとは思いません:

img {
    transformY(calc(scrollTop / 1.5));
}

IntersectionObserver も調べましたが、これでやりたいことが実現できるかどうかはわかりません。

どんな考えでも役に立ちます。ありがとう

4

0 に答える 0