根据滚动位置变换元素，而不使用滚动事件（仅在可能的情况下为Css）

Question

我目前在网站首页上有全屏英雄形象幻灯片放映。我有一个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，但是我不确定这能否实现我想做的事情。

任何想法都会有所帮助。谢谢