我正在尝试复制从熟练的Web设计师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上,我在控制台中收到以下消息,这可能与它有关:


  该站点似乎使用了滚动链接的定位效果。这可能不适用于异步平移。有关更多详细信息,请参见https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects,并加入有关工具和功能的讨论!

最佳答案

我现在已经弄清楚了,造成延迟的原因是html中缺少视口元标记。这导致具有默认的缩放级别,这使动画的更新频率降低,从而导致延迟。

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

10-08 13:29
查看更多