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

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

Это в основном проверяет, как далеко окно прокрутило и перемещает каждый из фонов разные суммы. Для этого размеры фона - разные высоты.