Как добавить разные скорости прокрутки к элементам HTML?

Я пытаюсь воспроизвести эффект, в котором, когда пользователь прокручивает, объекты прокручиваются с более медленной скоростью, давая эффект параллакса. Прекрасный пример того, что я пытаюсь сделать, находится на этом сайте ( https://universe.openai.com/). Хотя иногда это трудно сказать, вы можете увидеть эффект параллакса.

Я попытался добавить:

$(window).scroll(function () {

   $('*').css({
      'top' : ($(this).scrollTop()/40)+"px"
   });

});

но это было очень изменчиво, особенно в Chrome, и даже когда я использовал animate() вместо css().


Я пытался использовать StellarJS, но было много глюков и прерывистой анимации.

Это был мой код для StellarJS (я пытался $.stellar() тоже, но это было все еще изменчиво)

$.stellar({
        horizontalScrolling: false,
        verticalOffset: 0,
        horizontalOffset: 0
});

и часть HTML (я играл с соотношением много, все еще без изменений):

data-stellar-ratio="2"

Какие-нибудь другие решения или, возможно, разъяснения для StellarJS? Все ответы или комментарии приветствуются!

Спасибо.

0 ответов

Другие вопросы по тегам