Parallax effect на чистом css

Паралакс эффект можно сделать на чистом CSS в несколько строк кода. Смотрите пример ниже.


GRANDHOTEL СДЕЛАЕТ ВАШ ОТДЫХ НЕЗАБЫВАЕМЫМ!

С помощью удобного фильтра на нашем сайте, выберете необходимый отель со всеми удобствами

Перейти в каталог

Исполняемый код:

<div class="sectparalax"> <div class="parlx-txt"> <h4>GRANDHOTEL СДЕЛАЕТ ВАШ ОТДЫХ НЕЗАБЫВАЕМЫМ!</h4> <p>С помощью удобного фильтра на нашем сайте, выберете необходимый отель со всеми удобствами</p> <a class="knopka2" href="#">Перейти в каталог</a> </div> </div> <style> .sectparalax{ display:flex; align-items: center; justify-content: center; align-content: center; min-height: 500px; position:relative; background-position:left bottom; background-size: cover; background-repeat: no-repeat; opacity: 0.9; background-attachment: fixed; background-image: url(https://layout.rullan.in.ua/uploads/posts/2021-04/1618414928_img7.jpg);} .parlx-txt {width: 100%; text-align:center; color: #252424; font-size: 1.7em; letter-spacing: 2px; } .parlx-txt h4 {font-size:2em; font-weight:500; text-transform: uppercase; color: var(--white);} .parlx-txt p {text-align: center; text-transform: uppercase; color: var(--white); margin:10px 0 30px 0;} .parlx-txt a{color:var(--white);} @media (max-width: 568px) {.sectparalax {background-attachment: scroll;}} </style>