Javascript 多背景图像滚动

我相信这种效果可以在CSS中创建，但我不确定它背后是否有Javascript。但基本上我是在尝试复制上所看到的背景效果。当你向下滚动时，主图像后面的白色圆圈似乎以不同的速度滚动，这是如何实现的？

实际上有3种背景：

• .contentContainer

  保存主背景图像，并像任何背景一样随页面滚动

• .bgCircle1

  保存一组圆圈的背景图像

• .bgCircle2

  保存另一组圆的背景图像

滚动屏幕时，

.contentContainer

正常滚动，而

.bgCircle1

和

.bgCircle2

的滚动量是使用绑定到窗口滚动事件的此函数计算的：

var offset = jQuery(window).scrollTop();
$('.bgCircle1').css({
  'backgroundPosition': 'center -' + (offset / px_scroll_amt) + 'px'
});
if (xhr_support) {
  $(".bgCircle2").css({
    'backgroundPosition': 'center -' + (offset / (px_scroll_amt / 3)) + 'px'
  });
}

---

它基本上检查窗口的滚动距离，并将每个背景移动不同的量。背景大小是不同的高度以适应这种情况。

如果您查看您提到的页面的源代码，背景的逻辑是您将看到的最后一块javascript。如果你想要同样的效果，这正是你要做的。。。