Как добавить разные скорости прокрутки к элементам 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? Все ответы или комментарии приветствуются!
Спасибо.