Эффект параллакса – это визуальный эффект, когда элементы на веб-странице движутся с разной скоростью при прокрутке. Это позволяет создавать интересные и динамичные эффекты на сайте, делая его более привлекательным для посетителей. В этой статье мы рассмотрим, как создать сайт с использованием эффекта параллакс при прокрутке.
Шаг 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>
🎉 Теперь у вас есть сайт с эффектом параллакса при прокрутке!
Это базовый пример, который можно модифицировать и развивать, добавляя дополнительные блоки, анимации и другие элементы дизайна. Попробуйте экспериментировать с разными настройками и эффектами, чтобы создать уникальный и интересный сайт.
Добавить комментарий