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.

PreviousКроссбраузерность NextBootstrap

Last updated 4 months ago

Parallax

Простой 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

<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);
}

Результат:

Разберемся, что здесь происходит.

У второго элемента смещение в -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>

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;
}

Добавим для секций псевдоэлементы, которые будут выполнять роль фона:

.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);
}

Оформление контента внутри секций:

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

PreviousКроссбраузерность NextBootstrap

Last updated 4 months ago