Эффект параллакса при прокрутке

Здесь вы узнаете, как сделать эффект "параллакса" при прокрутке страницы сайта при помощи CSS.

Параллакс

Параллакс при прокрутке - это визуальный эффект на странице веб-сайта, при котором фоновый контент (например, изображение) движется со скоростью, отличной от скорости движения контента переднего плана. Нажмите на следующие ссылки, чтобы увидеть разницу между страницами с эффектом параллакса и без него.

Страница с параллаксом при прокрутки
Страница без параллакса при прокрутки

Примечание: Параллаксовая прокрутка не всегда работает на мобильных устройствах и смартфонах. Тем не менее, вы можете использовать медиа-запросы, чтобы этот эффект на мобильных устройствах отключался (см. последний пример в этом разделе).

Как сделать эффект параллакса при прокрутке

Используем контейнерный элемент и добавляем ему фоновое изображение заданной высоты. Затем, для создания эффекта параллакса используем свойство background-attachment: fixed. Другие свойства изображения используются для его более точного центрирования и масштабирования:

Пример с пикселями


<style>
.parallax {
  /* Используемое изображение */
  background-image: url("img_parallax.jpg");

  /* Устанавливаем высоту */
  min-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>:

Пример с процентами


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;
  }
}

Попробовать самому »

Панель навигации внизу страницы

Включить/выключить элемент