1

我目前在网站主页上有全屏英雄图像幻灯片。我有一个 javascript 效果，它获取滚动位置并将其除以 1.5，然后设置图像 transformY 位置，从而产生视差效果。

这是我目前拥有的代码：

$(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