我正在尝试复制从熟练的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可以很好地实现此目的,而不是自己编写代码。