Как создать: параллельный скролл

Узнайте, как использовать 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 может возникнуть проблема. Однако, вы можете отключить эффект параллакса на мобильных устройствах с помощью медиа-запросов:

например

/* Отключить параллакс scrolling для всех планшетов и смартфонов. Если необходимо, можно увеличить/уменьшить количество пикселей */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

попробуйте сами

В приведенном выше коде, когда ширина экрана составляет или меньше 1366 пикселей, эффект параллакса будет отключен, что подходит для большинства планшетов и смартфонов. Это достигается изменением .parallax класса background-attachment свойства из fixed to scroll Для этого, фоновое изображение будет прокручиваться вместе с остальной частью страницы, а не фиксироваться в поле зрения.