Параллакс-эффект — это интересный и популярный прием в веб-дизайне, который создает иллюзию глубины и движения, когда фон и контент на сайте двигаются с разной скоростью при прокрутке страницы. В этой статье мы рассмотрим, как создать сайт с использованием параллакс-эффекта на фоне.
Шаг 1: Подготовка
Для начала, вам потребуется следующее:
- HTML-файл (index.html)
- CSS-файл (styles.css)
- JavaScript-файл (script.js)
- Изображения для фона
Шаг 2: Создание HTML-структуры
Ваш HTML-файл должен содержать следующую структуру:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<title>Parallax Site</title>
</head>
<body>
<div class="parallax-section" data-speed="1" style="background-image: url('image1.jpg');">
<h1>Заголовок 1</h1>
</div>
<div class="content">
<p>Текст статьи...</p>
</div>
<div class="parallax-section" data-speed="2" style="background-image: url('image2.jpg');">
<h1>Заголовок 2</h1>
</div>
<div class="content">
<p>Текст статьи...</p>
</div>
</body>
</html>
Здесь мы создали два блока с классом parallax-section, которые будут иметь параллакс-эффект. Обратите внимание на атрибут data-speed, который указывает скорость движения фона относительно контента.
Шаг 3: Написание CSS-стилей
Теперь напишем стили для нашего сайта в файле styles.css:
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
}
.parallax-section {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.content {
padding: 2rem;
text-align: center;
}
Здесь мы задаем основные стили для блоков с параллакс-эффектом и контентом.
Шаг 4: Добавление JavaScript для параллакс-эффекта
В файле script.js добавьте следующий код:
document.addEventListener('scroll', function () {
const parallaxSections = document.querySelectorAll('.parallax-section');
parallaxSections.forEach((section) => {
const speed = section.getAttribute('data-speed');
const yOffset = window.pageYOffset;
const backgroundPosition = -(yOffset * speed);
section.style.backgroundPositionY = `${backgroundPosition}px`;
});
});
Этот код будет отслеживать прокрутку страницы и изменять положение фона блоков с параллакс-эффектом в зависимости от их data-speed.
Теперь ваш сайт готов, и вы можете наслаждаться красивым параллакс-эффектом на фоне! 😊
Не забудьте посетить нашу партнерскую школу по веб-разработке, если хотите узнать больше!
Добавить комментарий