Параллакс-эффект – это визуальный эффект, при котором объекты на переднем плане движутся быстрее, чем объекты на заднем плане. Этот эффект широко используется в веб-дизайне для создания интересных и динамичных сайтов. В этой статье мы рассмотрим, как создать параллакс-эффект с помощью 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.
😉 Вот и всё! Теперь у вас есть простой параллакс-эффект на вашем сайте.
Заключение
Создание параллакс-эффекта может быть простым и эффективным способом сделать ваш сайт визуально привлекательным. Этот пример может быть дополнен и модифицирован в соответствии с вашими потребностями и дизайном сайта. Удачи в создании потрясающих веб-страниц!
Добавить комментарий