В этой небольшой статье мы научимся создавать простой параллакс-эффект с помощью HTML, CSS и JavaScript.

Содержание

HTML

Итак, для начала создадим блок-обертку main:

<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>

Внутри блока-обертки мы создадим два HTML-элемента, которые потребуются для демонстрации параллакс-эффекта. Первый из них - 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;
}

Мы задаем position: relative для header, чтобы иметь возможность управлять положением этого элемента. А z-index: -1 нужен для того, чтобы во время действия эффекта параллакса элемент header оказался позади элемента section.

section {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    height: 100vh;
    font-size: 5rem;
    background: #fcdb6d;
    color: #0056a7;
}

В свою очередь, для элемента section мы задаем z-index равным 1, чтобы при прокручивании он оказался перед элементом header.

.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);
    }
}

Наконец, мы создаем анимацию для появления элементов: bounceIn для section и fadeIn для header. Класс animate-me добавляется к элементу section динамически с помощью JavaScript.

JavaScript

Теперь добавляем код JavaScript, необходимый для воспроизвоедения parallax-эффекта при скроллинге:

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.

Константа distance получает количество пикселей, на которое документ сместился по вертикали через свойство window.scrollY.

Затем, мы выбираем необходимый элемент из DOM и получаем доступ к свойству transform. С помощью которого мы динамически изменяем значение translateY, делая его различным для container и header, что и обеспечивает визуальный эффект параллакса.

Наконец, мы добавляем класс animate-me заголовку элемента section, благодаря чему элемент section h3 выпрыгивает.

Пример на codepen:

Спасибо за внимание.

Перевеод статьи Ibrahima Ndaw “Make a parallax effect with 10 lines of JavaScript”.