Как сделать - прокрутка параллакса
Узнайте, как создать эффект прокрутки «параллакса» с помощью CSS.
Параллакс
Параллаксная прокрутка — это тенденция веб-сайтов, при которой фоновое содержимое (например, изображение) перемещается с другой скоростью, чем содержимое переднего плана при прокрутке. Нажмите на ссылки ниже, чтобы увидеть разницу между веб-сайтом с параллаксной прокруткой и без нее.
Демонстрация с прокруткой параллакса
Демонстрация без прокрутки параллакса
Примечание. Параллаксная прокрутка не всегда работает на мобильных устройствах/смартфонах. Однако вы можете использовать медиа-запросы, чтобы отключить эффект на мобильных устройствах (см. последний пример на этой странице).
Как создать эффект прокрутки параллакса
Используйте элемент контейнера и добавьте фоновое изображение в контейнер определенной высоты. Затем используйте background-attachment: fixed
для создания фактического эффекта параллакса. Другие свойства фона используются для точного центрирования и масштабирования изображения:
Пример с пикселями
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
В приведенном выше примере для установки высоты изображения использовались пиксели. Если вы хотите использовать проценты, например 100%, чтобы изображение помещалось на весь экран, установите высоту контейнера параллакса на 100%. Примечание. Вы также должны применить height: 100%
как к <html>, так и к <body>:
Пример с процентами
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Некоторые мобильные устройства имеют проблемы с background-attachment: fixed
. Однако вы можете использовать медиа-запросы, чтобы отключить эффект параллакса для мобильных устройств:
Пример
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}