I Shar

I Shar

мир глазами веб-разработчика

10 строк и параллакс готов

как создать параллакс-эффект на JavaScript

I Shar

время чтения 2 мин.

Photo by Pierre Bamin on Unsplash

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


Содержание


HTML

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

Welcome

Scroll to see how cool i am!

Cool like you

Внутри блока-обертки мы создадим два HTML-элемента, которые потребуются для демонстрации параллакс-эффекта. Первый из них - header, этот элемент мы видим сразу при загрузке страницы. Второй - section, он появляется при прокручивании страницы вниз.

CSS

Как всегда, сбросим некоторые стили и импортируем выбранный шрифт:

@import url("/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”.

    • frontend
    • js

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.