javascript – 在WebKit中使用滚轮的Jerky parallaxing

我有一些关于parallaxing背景的问题.我为我的一些朋友组织的一个活动建立了一个小网站,在那个网站上,我在内容部分之间交替出现了一堆背景图片.我添加了一些逻辑来在滚动时偏移这些背景图像,以创建一个parallaxing效果.

它工作得很好,我没有注意到任何性能问题,但是当使用滚轮时,parallaxing似乎在WebKit浏览器中落后.

这是该网站的链接：

http://eventyrfestival.info/

我试图模仿的效果,至少对于背景图像,是在Spotify网站上看到的效果：

https://www.spotify.com/

从查看他们的源代码,我似乎做了或多或少相同的事情：我有一个parallaxing函数,根据文档的scrollTop值计算背景变换,并且此函数被限制为16毫秒并绑定到窗口的滚动事件.尽管如此,Spotify网站上的背景转换是即时的,而我的视觉效果落后于内容.它没有“破碎”,因为它在Firefox / IE中运行良好,并且在手动滑动滚动条时可以在WebKit浏览器中运行…但它真的很烦人.

有没有人对导致这种混蛋的原因有什么建议？

这是parallaxing功能的代码(我正在使用原型,对此垃圾邮件感到遗憾)：

    parallaxBackground: function () {
        var viewportTop = this.elements.$document.scrollTop();
        var viewportBottom = viewportTop + this.elements.$window.height();
        var scrollDelta = this.slideHeight + this.elements.$window.height();

        $.each( this.backgroundSlides, function ( index, slide ) {
            var slideTop = slide.$container.offset().top;
            var slideBottom = slideTop + this.slideHeight;
            if ( slideBottom < viewportTop || slideTop > viewportBottom )
                return true;
            var factor = 1 - ( slideBottom - viewportTop ) / scrollDelta;
            this.transformBackground( slide.$image, this.slideLength * ( factor - 1 ) );
        }.bind( this ) );
    },

    transformBackground: Modernizr.csstransforms ? function ( $backgroundElement, distance ) {
        $backgroundElement.css( {
            '-ms-transform': 'translate(0px, ' + distance + 'px)',
            '-webkit-transform': 'translate(0px, ' + distance + 'px)',
            'transform': 'translate(0px, ' + distance + 'px)'
        } );
    } : function ( $backgroundElement, distance ) {
        $backgroundElement.css( 'top', distance );
    }

以下是它如何绑定(使用Underscore进行限制)：

this.elements.$window.on( 'scroll',
    _.throttle( this.parallaxBackground.bind( this ), 16 ) );

解决方法:

我最近基于Spotify的网站重新创建了我自己的视差效果,我遇到了你在这里提到的许多问题.

虽然我不能完全摆脱Safari上的口吃,但我已经设法在Chrome和Firefox上达到平滑的60fps.

我在这里发布它作为jQuery插件,但您可以调整它以使用您选择的框架：

http://pixelcog.com/parallax.js/

有几个提示帮助我优化它：

>尽可能避免使用triggering a layout
> Don’t attach a lot of logic to the scroll event directly,按照setTimeout或requestAnimationFrame调用instead
>利用位置：固定;在背景元素上.在稍微滞后的浏览器上,口吃将是最小的.
>使用null transforms强制执行浏览器分层,但请谨慎使用.
>探索Chrome DevTools以诊断瓶颈

这些帮助我摆脱了我在自己的实现中看到的大部分口吃.

标签：jquery,javascript,css3,webkit,parallax
来源： https://codeday.me/bug/20190708/1404776.html