Прокрутка мультифоновых изображений

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

Он в основном проверяет, насколько далеко прокрутилось окно, и перемещает каждый из фонов на разные величины. Размеры фона для этой цели различаются по высоте.