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