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

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

HTML

<div class="parallax-horizontal"></div>

CSS

.parallax-horizontal {
  background-image: url('your-image.jpg');
  min-height: 100vh;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  animation: moveBackground 20s linear infinite;
}

@keyframes moveBackground {
  from { background-position: 0 0; }
  to { background-position: -100% 0; }
}

Объяснение

background-image, min-height, background-position, background-repeat, and background-size: значения этих свойств аналогичны примеру с простым вертикальным параллаксом, но настроены на движение в горизонтальном направлении.

animation: moveBackground 20s linear infinite именно эта анимация по ключевым кадрам непрерывно перемещает фоновое изображение слева направо, создавая эффект параллакса.

@keyframes moveBackground: определяет эффект, создаваемый анимацией, сдвигая фоновое изображение по горизонтали.

Спасибо за внимание.