Один из способов реализации эффекта параллакса с помощью CSS — зафиксировать изображение и не дать его скроллить. 1 Для этого используется свойство background-attachment:fixed. 1 Оно фиксирует фоновую картинку в своих координатах, и она не двигается при скролле. 1

Общая идея: 1

1. Добавить два блока — один с зафиксированной картинкой, второй с текстом. 1
2. Блоку для картинки присвоить отдельный класс CSS. 1
3. В присвоенный класс добавить свойство background-image, в которое прописать путь до нужной картинки. 1
4. С помощью CSS сделать так, чтобы блок занимал какую-то высоту и ширину, чтобы сквозь него просвечивала нужная картинка. 1
5. Запретить картинке двигаться с места и подогнать её масштаб под размер блока. 1
6. Для текстового блока указать, что его высота должна равняться высоте блока. 1

Ещё один способ — задать элементу глубину. 2 Для этого нужно применить к нему transform: translateZ и указать значение свойства perspective. 2 В качестве значения оно принимает расстояние от элемента до пользователя по оси Z — чем больше это значение, тем дальше элемент от пользователя, и наоборот. 2

Пример кода параллакса на CSS: 3

body, html { height: 100%; margin: 0; }.parallax {  background-image: url('background.jpg');  height: 100%;  background-attachment: fixed;  background-position: center;  background-repeat: no-repeat;  background-size: cover;}

Этот метод хорошо работает для фиксированных фоновых изображений, но если требуется более сложная анимация или взаимодействие с элементами на странице, стоит обратиться к JavaScript. 3