Более эффективный способ создания фиксированного фонового изображения parallax в css

Все мы знаем, что background-attachment: fixed делает фон фиксированным и создает эффект параллакса. Однако это очень дорого, так как DOM приходится перекрашивать каждый раз, когда вы прокручиваете страницу. Это заставляет ваш сайт чувствовать себя немного прерывистым, особенно если у вас есть несколько фиксированных фонов на Вашей странице. Кто-нибудь знает лучший способ сделать это?

1 ответ

  1. Этот чистый пример CSS использует абсолютное позиционированиеtransform, и perspectiveдля визуализации эффекта параллакса. Для некоторых браузеров, scroll-behavior: smoothможет также свести к минимуму некоторые из видимых choppiness.

    Есть более эффективные способы визуализации эффекта параллакса с помощью JavaScript, анимируя только видимые элементы и используя интервалы для обновления позиций элементов. В этой статье Более подробно объясняются некоторые из этих методов. requestAnimationFrameФункция, в частности, позволяет браузеру выполнить анимацию прокрутки при следующей доступной перерисовке.