jquery - 移动滚动动画延迟 - jQuery

Question

我正在尝试复制从才华横溢的网页设计师 Nathan Riley (https://nrly.co/) 那里找到的滚动动画。

我已经通过一些小代码从 html 更改 svg 过滤器代码中的属性来轻松完成这项工作。但问题是，在移动设备上查看页面时，该动画非常缓慢且滞后。

我写的代码:

html 过滤器:

<svg>
    <defs>
        <filter id="liquify">
            <feturbulence basefrequency="0" numoctaves="3" result="warp" type="fractalNoise"></feturbulence>
            <fedisplacementmap in="SourceGraphic" in2="warp" scale="100" xchannelselector="R" ychannelselector="B"></fedisplacementmap>
        </filter>
    </defs>
</svg>

在 css 中应用过滤器:

.liquify {
filter: url(#liquify);}

使用 scrollTop 设置动画的 jQuery 代码:

function liqScroll() {
var scrollTop = $(window).scrollTop();
$("#liquify > feTurbulence").attr({
    'baseFrequency' : +scrollTop / 100000,
});};

你们知道如何解决/解决延迟问题吗？

sitenote:在 firefox 上，我在控制台中收到以下消息，这可能与此有关:

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

Answer 1

我现在想通了，导致我滞后的原因是 html 中缺少视口(viewport)元标记。这会导致具有默认缩放级别，从而降低动画更新的频率，从而导致延迟。

同时使用js插件ScrollMagic非常适合用于此目的，而不是自己编写代码。