Чтобы создать эффект параллакса с помощью псевдоэлементов и трансформации фона, можно использовать следующий подход: 3

1. Задать базовые стили. 5 Для этого нужно установить свойства perspective (задание перспективы трансформации) и transform-style (задание стиля трансформации). 35
2. Добавить для секций псевдоэлементы, которые будут выполнять роль фона. 2 Например, для создания плавно скользящего фона для трёх секций можно использовать следующий код: 2

.parallax-section::before {  content: '';  position: absolute;  width: 100vw;  height: 100vh;  top: 0;  left: 0;  z-index: -1;  transform: translateZ(-150px) scale(4);  background: center/cover no-repeat;}.parallax-section_1::before {  background-image: url(https://www.desktopbackground.org/download/3840x2160/2010/06/01/26317_download-wallpapers-3840x2400-marmalade-sugar-candy-backgrounds_3840x2400_h.jpg);}

3. Задать стили псевдоэлементу before. 3 Ключевым для достижения эффекта параллакса является значение свойства transform. 3 Трансформация будет происходить по оси Z: фоновое изображение сдвинется на глубину в 1 пиксель. 3 Фоновая картинка будет двигаться медленнее, чем заголовок. 3

Для управления скоростью эффекта и размерами слоёв можно использовать функции трансформации translateZ() и scale(). 4