02 Июн 2023
2 мин
430

Как добавить параллакс-эффект к фоновому изображению

Откройте для себя, как создать красивый и динамичный параллакс-эффект для фонового изображения на сайте, используя HTML, CSS и JavaScript!

Содержание

Параллакс-эффект – это интересный визуальный эффект, который придает глубину и динамичность вашему сайту. В этой статье мы рассмотрим, как добавить параллакс-эффект к фоновому изображению с помощью 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';
});

Этот код добавляет обработчик событий на прокрутку окна и изменяет позицию фонового изображения в зависимости от положения прокрутки. Это создает иллюзию глубины и динамичности при прокрутке страницы.

🎉 Теперь у вас есть красивый параллакс-эффект для фонового изображения на вашем сайте!

Не забудьте проверить школу по веб-разработке, которая хорошо учит «Веб-разработка»!

Содержание

Добавить комментарий

Пройти тест на профессию