Как сделать - параллакс прокрутку
Узнайте, как создать эффект прокрутки «параллакса» с помощью CSS.
Параллакса
Прокрутка параллакса — это тренд веб-сайта, в котором фоновое содержимое (т.е. изображение) перемещается с разной скоростью, чем содержимое переднего плана при прокрутке. Нажмите на ссылку ниже, чтобы увидеть разницу между веб-сайт с и без параллакса прокрутки.
Demo without parallax scrolling
Примечание: Прокрутка параллакса не всегда работает на мобильных устройствах/смартфонах. Однако для отключения эффекта от мобильных устройств можно использовать запросы мультимедиа (см. Последний пример на этой странице).
Как создать эффект прокрутки параллакса
Используйте элемент контейнера и добавьте фоновое изображение в контейнер с определенной высотой. Затем используйте background-attachment: fixed
для создания фактического эффекта параллакса. Другие свойства фона используются для идеального центрирования и масштабирования изображения:
Example with pixels
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
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;
}
}