javascript - 使用 jQuery 高效创建简单的视差效果

Question

因此，对于我的一个新项目，我决定为滚动上的一些背景图像编写一个 super 简单的视差脚本。这就是我想到的:

$(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

考虑使用 animate 代替立即设置值的 css。它使用计时器/requestAnimationFrame 推迟设置值，确保您的动画不会阻塞 UI、异步(与其他代码伪并行运行)，并确保动画流畅。