📗Parallax
Parallax - это техника, при использовании которой элементы на заднем плане при прокрутке движутся медленнее, чем на переднем. Данный эффект дает ощущение глубины пространства и достигается использованием оси z, направленной “вглубь” экрана.
Довольно часто параллакс реализуется с помощью javascript, но данное решение приводит ко многим проблемам. В их числе привязка к событию scroll, из-за чего браузер вынужден постоянно обновлять страницу, что сильно затормаживает работу сайта и приводит к сбоям на мобильных устройствах. Также возможны проблемы с поддержкой кода отдельными браузерами.
Использование CSS в данном случае решает эти проблемы, делая эффект плавнее и менее ресурсозатратным, что положительно сказывается на скорости отрисовки.
Простой parallax
Свойство background-attachment: fixed является простейшим способом создания parallax-эффекта. Оно применяется к той секции, фоновое изображение которой мы хотим зафиксировать. В итоге при скролле контент будет прокручиваться, а фон останется на месте.
HTML
<body>
<section class="parallax">
<p class="parallax__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section class="static"></section>
</body>CSS
.parallax {
height: 80vh;
background: url(https://www.desktopbackground.org/download/3840x2160/2010/06/01/26317_download-wallpapers-3840x2400-marmalade-sugar-candy-backgrounds_3840x2400_h.jpg) center/cover no-repeat;
background-attachment: fixed;
}
.static {
height: 80vh;
}
.parallax__text {
font-size: 42px;
padding-top: 200px;
text-align: center;
}Результат:
Создание сложного parallax-эффекта с помощью CSS
Начнем с html-разметки. Создадим контейнер и два элемента внутри, расположенные на разном расстоянии от экрана.
HTML
<div class="parallax">
<p class="parallax__elem parallax__elem_1">Этот элемент находится ближе</p>
<p class="parallax__elem parallax__elem_2">А этот дальше</p>
</div>CSS
.parallax {
position: relative;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
.parallax__elem {
position: absolute;
width: 100%;
top: 0;
left: 0;
text-align: center;
font-size: 30px;
padding: 70vh 0;
}
.parallax__elem_1 {
transform: translateZ(0);
}
.parallax__elem_2 {
transform: translateZ(-1px);
}Результат:
Разберемся, что здесь происходит.
Высота контейнера с классом .parallax равна высоте экрана, дочерние элементы относительно него абсолютно позиционированы и имеют верхний и нижний отступ в 70vh.
Свойство perspective задает глубину просмотра, значение шкалы оси z. От него мы будем отталкиваться при задавании расстояния между элементами.
У первого элемента значение смещения по оси Z равно нулю. Он никак не меняет свою скорость при прокрутке страницы.
У второго элемента смещение в -1px. Он находится дальше, выглядит меньше и движется при прокрутке медленнее.
Для того, чтобы второй элемент приобрел стандартный размер, увеличим его, задав большее значение scale:
.parallax__elem_2 {
transform: translateZ(-1px) scale(2);
}
Примечание:
Формула для подсчета необходимого значения scale: 1 + (translateZ * -1) / perspective
Добавим третий элемент:
HTML
<div class="parallax">
<p class="parallax__elem parallax__elem_1">Этот текст ближе</p>
<p class="parallax__elem parallax__elem_2">А этот дальше</p>
<p class="parallax__elem parallax__elem_3">Совсем далеко</p>
</div>CSS
.parallax {
position: relative;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
.parallax__elem {
position: absolute;
width: 100%;
top: 0;
left: 0;
text-align: center;
font-size: 30px;
padding: 70vh 0;
}
.parallax__elem_1 {
transform: translateZ(0);
}
.parallax__elem_2 {
transform: translateZ(-1px);
}
.parallax__elem_3 {
transform: translateZ(-2px);
}Третий элемент находится в два раза дальше, чем второй.
Фон с использованием parallax
Чаще всего параллакс используется в отдельных частях страницы. Создадим новую разметку с тремя секциями и плавно скользящим фоном.
HTML
<body class="main-page">
<section class="parallax-section parallax-section_1">
<div class="content">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</section>
<section class="parallax-section parallax-section_2">
<div class="content">
<p class="text">Distinctio nisi eius omnis, error perspiciatis officiis sapiente?</p>
</div>
</section>
<section class="parallax-section parallax-section_3">
<div class="content">
<p class="text">Nulla quibusdam, tempora nam laudantium, omnis quae id?</p>
</div>
</section>
</body>Поскольку теперь присутствуют несколько секций с параллакс-эффектом, назначаем свойства .parallax-контейнера из предыдущего примера на body с классом main-page:
CSS
html {
overflow: hidden;
}
.main-page {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 50px;
}Перейдем к секциям:
.parallax-section {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}Каждая секция по ширине и высоте теперь равна размерам экрана. Свойство overflow: hidden не дает возможности содержимому разных секций перекрыть друг друга.
Добавим для секций псевдоэлементы, которые будут выполнять роль фона:
.parallax-section::before {
content: '';
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: -1;
transform: translateZ(-150px) scale(4);
background: center/cover no-repeat;
}
.parallax-section_1::before {
background-image: url(https://www.desktopbackground.org/download/3840x2160/2010/06/01/26317_download-wallpapers-3840x2400-marmalade-sugar-candy-backgrounds_3840x2400_h.jpg);
}
.parallax-section_2::before {
background-image: url(https://i.imgur.com/uYcPZ7i.jpg);
}
.parallax-section_3::before {
background-image: url(http://www.aljanh.net/data/archive/img/968925867.jpeg);
}Отрицательный z-index "подкладывает" псевдоэлемент под контент. translateZ(-150px) в три раза превышает размер перспективы, замедляя прокрутку фона. Чем больше разница между ними, тем медленнее прокручивается элемент. Scale(4) найден по формуле, приведенной выше: 150/50 + 1. Таким образом, фон сохраняет первоначальный размер и качество.
Оформление контента внутри секций:
.content {
margin: 0 auto;
width: 50vw;
padding: 50px;
background-color: rgba(255, 255, 255, 0.6);
margin-top: 220px;
}
.text {
font: 700 40px sans-serif;
color: #555;
line-height: 1.2;
}Результат:
Поскольку параллакс-секции изолированы друг от друга, изменение их высоты и добавление статичных секций между ними не влияет на работу параллакса.
Уменьшим среднюю секцию и добавим вокруг неё две обычных:
HTML
<body class="main-page">
<section class="parallax-section parallax-section_1">
<div class="content">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</section>
<section class="static"></section>
<section class="parallax-section parallax-section_2">
<div class="content">
<p class="text">Distinctio nisi eius omnis, error perspiciatis officiis sapiente?</p>
</div>
</section>
<section class="static"></section>
<section class="parallax-section parallax-section_3">
<div class="content">
<p class="text">Nulla quibusdam, tempora nam laudantium, omnis quae id?</p>
</div>
</section>
</body>CSS
.parallax-section_2 {
height: 80vh;
}
.static {
height: 300px;
}Напоследок приведем в движение контент внутри подвижных секций и немного отдалим его от экрана:
.content {
position: absolute;
left: 25%;
transform: translateZ(-25px) scale(1.2);
}Результат:
Поддерживаемость браузерами
Parallax на CSS поддерживается всеми популярными браузерами (Chrome, Safari, Opera, Firefox), кроме Internet Explorer.
Last updated