Question

因此，对于我的一个新项目，我决定在滚动时为一些背景图像编写一个超级简单的视差脚本。这就是我想出的：

$(document).ready(function(){
  parallaxScroll();
  $(window).bind('scroll', function() {
    parallaxScroll();
  });
});

function parallaxScroll() {
  $(".parallax").each(function() {
    if($(this).hasClass('reverse')) {
       $(this).css("background-position","center " + (($(this).offset().top - $(window).scrollTop())/2) + "px");
    } else {
       $(this).css("background-position","center " + (($(this).offset().top - $(window).scrollTop())/-2) + "px");               
    }
  });
}

我的问题是，是否足够有效？如果没有，是否有更好的解决方案？我不确定使用.each（）是否最适合性能，但似乎工作正常。我在文档加载时运行该函数的原因是，当您第一次滚动页面时，背景图像不会跳转。

Answer 1

而不是css立即设置值，而是考虑使用animate。它使用timers / requestAnimationFrame延迟设置值，确保动画不会阻止UI，异步（与其他代码伪运行），并确保动画流畅。

Answer 2

这是一个简单的JS解决方案，但你可以很容易地将它移植到jQuery：

var lastScrollY = 0;
var backgroundImageY = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
                            window.msRequestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame;

window.addEventListener('load', processScrollEvent);

function processScrollEvent() {
    var innerHeight = window.innerHeight;
    var scrollHeight = document.body.scrollHeight;
    var backgroundImage = document.querySelector('#background img');

    lastScrollY = document.body.scrollTop;

    var currBackgroundImageY = Math.round(((backgroundImage.scrollHeight - innerHeight) / 100) * ((lastScrollY / (innerHeight - scrollHeight)) * 100));

    if(currBackgroundImageY != backgroundImageY) {
        backgroundImageY = currBackgroundImageY;
        requestAnimationFrame(processScrollAnimationFrame);
    }
}

function processScrollAnimationFrame() {
    var backgroundImage = document.querySelector('#background img');
    var transforms = ['transform', 'oTransform', 'msTransform', 'mozTransform', 'webkitTransform'];

    for(var i = 0; i < transforms.length; i++) {
        backgroundImage.style[transforms[i]] = 'translate3d(0, ' + backgroundImageY + 'px, 0)';
    }
}

使用jQuery有效地创建简单的视差效果

2 个答案: