Как сделать - Параллакс
Узнать, как создать эффект "параллакса" прокрутки с помощью CSS.
Параллакс
Параллакс прокрутки - это тенденция веб-сайта, где фоновое содержимое (т.е. изображение) перемещается с другой скоростью, чем содержимое переднего плана при прокрутке. Нажмите на ссылки ниже, чтобы увидеть разницу между веб-сайтом с параллаксной прокруткой и без нее.
Примечание: Параллакс прокрутка не всегда работает на мобильных устройствах/смартфонах. Однако вы можете использовать медиа запросы для отключения эффекта на мобильных устройствах (см. Последний пример на этой странице).
Создать параллакс
Используйте элемент контейнера и добавьте фоновое изображение в контейнер с определенной высотой. Затем используйте background-attachment: fixed для создания фактического эффекта параллакса. Другие свойства фона используются для идеального центрирования и масштабирования изображения:
Пример с пикселями
<style>
.parallax {
/* Используемое изображение */
background-image: url("img_parallax.jpg");
/* Установите определенную высоту */
height: 500px;
/* Создайте эффект параллакса прокрутки */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Элемент контейнера -->
<div class="parallax"></div>Редактор кода »В приведенном выше примере используются пиксели для установки высоты изображения. Если вы хотите использовать процент, например 100%, чтобы изображение соответствовало всему экрану, установите высоту контейнера параллакса на 100%. Примечание: Вы также должны подать заявку height: 100% как в <html> и <body>:
Пример with percent
body, html {
height: 100%;
}
.parallax {
/* Используемое изображение */
background-image: url("img_parallax.jpg");
/* Полный рост */
height: 100%;
/* Создайте эффект параллакса прокрутки */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}Редактор кода »Некоторые мобильные устройства имеют проблемы с background-attachment: fixed. Однако вы можете использовать медиа запросы, чтобы отключить эффект параллакса для мобильных устройств:
Пример
/* Выключите параллакс прокрутки для всех планшетов и телефонов. Увеличение уменьшение пикселей при необходимости */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}Редактор кода »