Параллакс эффект для фона сайта на чистом CSS

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

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

Видео:

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

This is parallax

Вот и сам код:

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

Семенюк Назарий

Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)

Оцените статью

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 7

Оценок пока нет. Поставьте оценку первым.