23 Июн 2023
2 мин
646

Как создать сайт с использованием эффекта параллакс при прокрутке

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

Содержание

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

Шаг 1: Подготовка HTML-структуры

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

<!DOCTYPE html>
<html>
<head>
  <title>Параллакс-эффект</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="parallax-block" id="block1"></div>
  <div class="parallax-block" id="block2"></div>
  <div class="parallax-block" id="block3"></div>
</body>
</html>

Шаг 2: Применение CSS-стилей

Теперь нам нужно добавить стили для наших блоков и фоновых изображений. Создадим файл styles.css и добавим следующие стили:

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

.parallax-block {
  min-height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#block1 {
  background-image: url('image1.jpg');
}

#block2 {
  background-image: url('image2.jpg');
}

#block3 {
  background-image: url('image3.jpg');
}

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

Шаг 3: Добавление JavaScript

Последний шаг – добавить немного JavaScript для управления скоростью прокрутки фоновых изображений. Создадим файл scripts.js и добавим следующий код:

window.addEventListener("scroll", function() {
  const parallaxBlocks = document.querySelectorAll(".parallax-block");
  parallaxBlocks.forEach(function(block) {
    const speed = 0.5;
    const yPos = window.pageYOffset * speed;
    block.style.backgroundPosition = "center " + yPos + "px";
  });
});

Этот код отслеживает событие прокрутки страницы и изменяет позицию фона каждого блока в зависимости от скорости прокрутки.

Не забудьте подключить scripts.js к вашему HTML-файлу:

<script src="scripts.js"></script>

🎉 Теперь у вас есть сайт с эффектом параллакса при прокрутке!

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

Содержание

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

Определи профессию по рисунку