Перейти в телеграм, чтобы получить результаты теста
Параллакс-эффект – это интересный визуальный эффект, который придает глубину и динамичность вашему сайту. В этой статье мы рассмотрим, как добавить параллакс-эффект к фоновому изображению с помощью 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 для создания параллакс-эффекта. Сначала добавьте стили для фонового изображения и контейнера.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .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, чтобы создать параллакс-эффект при прокрутке страницы.
1 2 3 4 5 6 | window.addEventListener('scroll', function() { const parallaxContainer = document.querySelector('.parallax-container'); let scrollPosition = window.pageYOffset; parallaxContainer.style.backgroundPositionY = scrollPosition * 0.5 + 'px';}); |
Этот код добавляет обработчик событий на прокрутку окна и изменяет позицию фонового изображения в зависимости от положения прокрутки. Это создает иллюзию глубины и динамичности при прокрутке страницы.
🎉 Теперь у вас есть красивый параллакс-эффект для фонового изображения на вашем сайте!
Не забудьте проверить школу по веб-разработке, которая хорошо учит «Веб-разработка»!
Добавить комментарий