Question

我试图复制一个从设计的网页设计师Nathan Riley（https://nrly.co/）找到的滚动动画。

我用一些小代码改变了svg过滤器代码中的属性，从html中完成了很容易。问题是，当在移动设备上查看页面时，该动画真的很慢而且滞后。

我写的代码：

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上我在控制台中收到以下消息，这可能与它有关：

此网站似乎使用滚动链接定位效果。这可能不适用于异步平移;有关详细信息，请参阅https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects，并加入有关相关工具和功能的讨论！

Answer 1

我现在想通了，导致我滞后的原因是html中缺少viewport元标记。这导致了默认的缩放级别，这使得动画更新频率降低，导致滞后。

同样使用js插件ScrollMagic可以很好地实现这一目的，而不是编写你自己的代码。

移动滚动动画Lag - jQuery

1 个答案: