移动滚动动画滞后- jQuery

Question

我试图复制一个滚动动画，我发现从脱口网站设计师Nathan (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);}

使用jQuery动画的scrollTop代码：

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

你们知道如何解决/解决滞后问题吗？

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

此网站似乎使用滚动链接定位效果。这可能不适合异步摇摄；有关更多细节，请参见https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects，并加入相关工具和特性的讨论！

Answer 1

到现在为止，我发现了造成延迟的原因，是html中缺少的viewport元标记。这会导致默认缩放级别，这使得动画更新频率降低，导致延迟。

此外，使用js插件ScrollMagic的效果也很好，而不是自己编写代码。