01 Июн 2023
2 мин
179

Как создать параллакс-эффект на сайте

Узнайте, как создать впечатляющий параллакс-эффект на вашем сайте с помощью простых шагов в HTML, CSS и JavaScript.

Содержание

Параллакс-эффект – это визуальный эффект, при котором объекты на переднем плане движутся быстрее, чем объекты на заднем плане. Этот эффект широко используется в веб-дизайне для создания интересных и динамичных сайтов. В этой статье мы рассмотрим, как создать параллакс-эффект с помощью HTML, CSS и JavaScript.

1. Подготовка HTML

Для начала, создадим простую HTML-структуру с двумя блоками — передним и задним планами.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Параллакс-эффект</title>
</head>
<body>
  <div class="parallax-container">
    <div class="background"></div>
    <div class="foreground"></div>
  </div>
</body>
</html>

2. Создание стилей CSS

Теперь добавим стили для наших блоков, чтобы они занимали весь экран и имели разные фоновые изображения.

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.parallax-container {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg');
  background-size: cover;
  z-index: 1;
}

.foreground {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('foreground.png');
  background-size: cover;
  z-index: 2;
}

3. Добавление JavaScript

Теперь добавим скрипт, который будет создавать параллакс-эффект при прокрутке страницы.

window.addEventListener('scroll', function() {
  const parallaxContainer = document.querySelector('.parallax-container');
  const background = parallaxContainer.querySelector('.background');
  const foreground = parallaxContainer.querySelector('.foreground');

  const scrollTop = window.pageYOffset;
  const backgroundSpeed = 0.5;
  const foregroundSpeed = 0.8;

  background.style.transform = `translateY(${scrollTop * backgroundSpeed}px)`;
  foreground.style.transform = `translateY(${scrollTop * foregroundSpeed}px)`;
});

В этом примере мы используем событие scroll для обработки прокрутки страницы. Затем мы определяем коэффициенты скорости для переднего и заднего планов, и смещаем их по оси Y с помощью свойства transform.

😉 Вот и всё! Теперь у вас есть простой параллакс-эффект на вашем сайте.

Заключение

Создание параллакс-эффекта может быть простым и эффективным способом сделать ваш сайт визуально привлекательным. Этот пример может быть дополнен и модифицирован в соответствии с вашими потребностями и дизайном сайта. Удачи в создании потрясающих веб-страниц!

Добавить комментарий