滚动的多背景图像

Question

我相信这个效果可以在CSS中创建，但我不确定它背后可能有一些Javascript。但基本上我试图复制meandmyaaa.com上看到的背景效果。向下滚动时，主图像后面的白色圆圈似乎以不同的速率滚动，如何实现？

Answer 1

实际上有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'
  });
}

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