Перейти в телеграм, чтобы получить результаты теста
Параллакс-эффект – это интересный визуальный эффект, который придает глубину и динамичность вашему сайту. В этой статье мы рассмотрим, как добавить параллакс-эффект к фоновому изображению с помощью 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="content">
<h1>Мой крутой сайт с параллакс-эффектом</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
</div>
</body>
</html>
Шаг 2: Добавление стилей CSS
Теперь добавьте стили CSS для создания параллакс-эффекта. Сначала добавьте стили для фонового изображения и контейнера.
.parallax-container {
position: relative;
background-image: url("path/to/your/background-image.jpg");
height: 100vh; /* Высота контейнера */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
Шаг 3: Добавление JavaScript для эффекта параллакса
Наконец, добавьте небольшой код JavaScript, чтобы создать параллакс-эффект при прокрутке страницы.
window.addEventListener('scroll', function() {
const parallaxContainer = document.querySelector('.parallax-container');
let scrollPosition = window.pageYOffset;
parallaxContainer.style.backgroundPositionY = scrollPosition * 0.5 + 'px';
});
Этот код добавляет обработчик событий на прокрутку окна и изменяет позицию фонового изображения в зависимости от положения прокрутки. Это создает иллюзию глубины и динамичности при прокрутке страницы.
🎉 Теперь у вас есть красивый параллакс-эффект для фонового изображения на вашем сайте!
Не забудьте проверить школу по веб-разработке, которая хорошо учит «Веб-разработка»!
Забрать
Добавить комментарий