Плавающий текст при скролле?

Question

[MegaPuxapb]

q665588f.beget.tech/scroll
Почему фоновый текст при скролле, "плывёт" рывками (особенно в первой секции)?

Answer 1

[wqertAnna]

функция, которая инициализирует параллакс у тебя повешена на событие скролла

Когда страница загружается к блоку с текстом применяются сss стили, в данном случае top: 25%,

а после скролла страницы js изменяет свойство top на необходимое для параллакса


решение: инициализируй параллакс в том числе и при загрузке страницы, а не только при скролле.

т.е. при первом скролле текст делает рывок не только в первой секции, а во всех, просто ты их не видишь.
Рывок логичен, ведь свойство top за мгновение меняется с 25% до 1px

Comments

[MegaPuxapb]

q665588f.beget.tech/scroll (кеш обновите)
сделал.
всё равно рывки(

[wqertAnna]

MegaPuxapb, у вас изначально один стиль отрендерился (css), а только потом срабатывает js и назначает свой top, логично, что он дергается.
Обычно, когда есть такие моменты, их надо спрятать.
Думаю, оптимально это реализовать анимацию появления.

добавьте эти стили:

.text__bg {
  opacity: 0;
  transition: opacity .4s .2s;
}

.text__bg.active {
  opacity: 1;
}

а в скрипт добавьте это:

$('.text__bg').addClass('active');

Таким образом сразу после загрузки текст не будет виден, а потом медленно появиться