В этой статье мы научимся создавать простой параллакс-эффект, используя HTML, CSS и JavaScript. Параллакс-эффект добавляет глубину и интерактивность вашему веб-сайту, делая его более привлекательным.
Содержание
- HTML
- CSS
- JavaScript
HTML
Начнем с создания основной структуры HTML. Нам понадобится блок-обертка <main> с двумя элементами: <header> и <section>.
<main>
<header>
<div class="container">
<i class="fas fa-5x fa-laugh"></i>
<h3>Welcome</h3>
<p>Scroll to see how cool I am!</p>
</div>
</header>
<section>
<h3>Cool like you</h3>
</section>
</main>Элемент <header> будет виден сразу при загрузке страницы, а <section> появится при прокрутке вниз.
CSS
Далее настроим стили для наших элементов. Начнем с базовых стилей и импортируем шрифт:
@import url("https://fonts.googleapis.com/css?family=Courgette:400,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #0056a7, #165fa3, #477aaa);
font-family: "Courgette", cursive;
}
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
height: 100vh;
color: #eee;
z-index: -1;
text-align: center;
animation: fadeIn 1.5s ease-in-out;
}
section {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
height: 100vh;
font-size: 5rem;
background: #fcdb6d;
color: #0056a7;
}
.animate-me {
animation: bounceIn 3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes bounceIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}Мы задаем стили для <header> и <section>, чтобы создать эффект параллакса. Класс animate-me добавляется к элементу <section> динамически с помощью JavaScript.
JavaScript
Теперь добавим JavaScript для воспроизведения параллакс-эффекта при прокрутке страницы:
window.addEventListener("scroll", function() {
const distance = window.scrollY;
document.querySelector("header").style.transform = `translateY(${distance * 1}px)`;
document.querySelector(".container").style.transform = `translateY(${distance * 0.3}px)`;
setTimeout(() => {
document.querySelector("section h3").classList.add("animate-me");
}, 400);
});Код добавляет обработчик события scroll, который изменяет значение translateY для элементов <header> и .container, создавая эффект параллакса. Также добавляется класс animate-me для элемента <section h3>, чтобы он появился с анимацией.
Заключение
Этот простой параллакс-эффект придаст вашей странице дополнительную интерактивность и визуальную привлекательность. Попробуйте реализовать его на своем сайте и наслаждайтесь результатом!
