Всем привет! Как вы уже догадались, сегодня мы будем говорить о параллаксе. Надеюсь, данная информация будет для вас полезной. Прекрасного чтения. Погнали!
Что такое параллакс?
Параллакс – это визуальный эффект, который проявляется исключительно при скролле. Если страничку не скроллить, то, соответственно, вы ничего не увидите. Функция параллакса заключается в отделении фона от других элементов, таким образом, происходит визуализация данного эффекта. Он достигается с помощью нескольких слоев, “накладывая” друг на друга.
Как его сделать?
Эффекта параллакса можно достичь несколькими способами.
Самый простой способ, который можно сделать, это использовать css-свойство background-attachment: fixed;
Это свойство показывает, будет ли прокручиваться фоновое изображение вместе с содержимым или нет. Т.е при прокрутке страницы у нас текст будет прокручиваться, а сама картинка будет оставаться на месте, что визуально будет созвадавать эффект параллакса.
Давайте разбираться, как оно работает.
Для начала создадим html разметку.
<section><span>Scroll Down </span></section>
<section class="fixed one"></section>
<section><span> Keep Scrolling Down</span> </section>
<section class="fixed two"></section>
<section><span>Scroll Down A Little More</span></section>
<section class="fixed three"></section>
<section><span>The End </span></section>
Разметку мы сделали, после можно переходить к css стилям, здесь задаем минимальные стили для <section>
section {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
Как видите у нас для section class="fixed" заданы разные дополнительные классы. Это сделано для того, чтобы можно было для каждой section задать свою картинку через css.
08 Апр 2024
149939