Приветствую на страницах сайта WebDevTips. Сегодня покажу, как за 2-3 минуты сделать параллакс эффект для заднего фона вашего сайта. Писать будем на чистом CSS. Без использования JS, или каких либо библиотек. Наверняка вы часто встречали этот эффект. Это один из элементов wow-дизайна, который не только красиво выглядит, но и повышает конверсию.

Кстати, еще одним элементом wow-дизайна является видео фон для сайта. Если вы еще не знаете как поставить видео на фон вашего сайта — рекомендую ознакомится с моей статьей.

Видео:

Пример параллакс эффекта для фоне:

Вот и сам код:

<div class="parallax">
   <h1>
      This is parallax
   </h1>
   <div class="mask"></div>
</div>

.parallax {
    background-image: url(bg-image.jpg);
    height: 500px;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    color: #ffffff;
    font-size: 60px;
    align-items: center;
    position: relative;
}
.parallax .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    z-index: 2;
}
.parallax h1 {
    z-index: 3;
}

В принципе, на этом код параллакса заканчивается. Далее необходимо добавить только контент вверху и внизу от него, что бы увидеть сам эффект!

Вот все файлы с полным кодом из видео урока — скачать.

Спасибо, что прочитали! Если у вас остались любые вопросы — задавайте их в комментариях, буду рад ответить)

Буду очень благодарен, если вы подпишитесь на мой Telegram-канал, или YouTube.

Read article «Parallax scrolling effect for background using only CSS» in English.