Question

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

它运行良好，我没有注意到任何性能问题，但在使用滚轮时，parallaxing似乎在WebKit浏览器中落后。

这是指向该网站的链接：

我尝试模仿的效果，至少对于背景图片来说，是Spotify网站上看到的效果：

https://www.spotify.com/

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

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

以下是parallaxing功能的代码（我使用原型，对this垃圾邮件感到抱歉）：

    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 ) );

Answer 1

我最近根据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
在背景元素上使用position:fixed;。在稍微滞后的浏览器上，口吃将是最小的。
使用null transforms强制执行浏览器分层，但请谨慎使用。
探索Chrome DevTools以诊断瓶颈

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

在WebKit中使用滚轮的混乱parallaxing

1 个答案: