В этой статье мы расскажем о том, как использовать CSS — преобразования, перспективу и некоторые триксы с масштабом, чтобы создать эффект паралакса для прокрутки веб-сайта на чистом CSS .

Параллакс почти всегда обрабатывается с помощью JavaScript и, чаще всего, этот процесс сопровождается очень не производительными методами с нарушениями события scroll, изменениями DOM -модели непосредственно в заголовке и запуском не нужных перекомпоновки и раскраски.

Все это происходит не синхронно с рендерингом, вызывает выпадение кадров и «заикание » прокрутки. Лучшее решение для использования паралакс — эффекта — requestAnimationFrame , который полностью изменяет принцип работы – но как нам полностью избавиться от использования JavaScript ?

Создавая эффект параллакса посредством CSS вы убираете все эти вопросы и позволяете браузеру использовать аппаратное ускорение, в результате чего почти всю тяжелую работу делает компьютер пользователя. Результатом является плавная прокрутка. Все кадры остаются на месте.

Вы также можете комбинировать эффект с другими функциями CSS , такими как media queries или supports – кому респонсивный паралакс?

Демо-режим Теория

Прежде чем погрузиться в детали работы эффекта, давайте создадим костяк разметки:

... ... ...

И некоторые базовые детали стиля:

Parallax { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; } .parallax__layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .parallax__layer--base { transform: translateZ(0); } .parallax__layer--back { transform: translateZ(-1px); }

Класс parallax это то место, где происходит чудо. Свойства элемента height и perspective зафиксируют перспективу в центре, создавая начальную точку в 3D -области просмотра.

Свойство overflow-y: auto позволит скролить контент в обычном режиме, но теперь элементы-потомки будут отображаться относительно фиксированной перспективы. Это ключ к созданию паралакс-эффекта.

Далее класс parallax__layer . Как предполагает имя, он определяет слой содержимого, к которому будет применен эффект. Элемент извлекается из потока контента и настраивается для заполнения пространства контейнера.

И, наконец, у нас есть классы модификаторов — parallax__layer—base и parallax__layer—back . Они используются для определения скорости прокрутки элемента параллакса, переводя его вдоль оси Z (перемещение дальше или ближе относительно области просмотра ).

Для краткости я определил только две скорости слоя. Мы добавим еще несколько скоростей чуть позже.

Демо-режим Коррекция глубины

Так как эффект параллакса создан при помощи 3D -преобразования, перемещение элемента вдоль оси Z имеет побочный эффект — его размеры меняются в зависимости от того, как мы передвигаем его ближе или дальше от области просмотра.

Чтобы избежать этого, мы применим трансформацию элемента с помощью метода scale() , чтобы он отображался в оригинальном размере:

Parallax__layer--back { transform: translateZ(-1px) scale(2); }

Коэффициент масштабирования может быть рассчитан с помощью формулы 1 + (translateZ * -1) / perspective) . Для примера, если perspective области просмотра равен 1px и мы перемещаем элемент на — 2px вдоль оси Z коэффициент масштабирования будет равен scale(3) :

Parallax__layer--deep { transform: translateZ(-2px) scale(3); }

Демо-режим с коррекцией глубины Управление скоростью слоя

Скоростью слоя управляет сочетание значений перспективы и Z -оси. Элементы с отрицательными значениями Z -оси будет прокручиваться медленнее, чем элементы, с положительным значением.

Элементы с отрицательными значениями по оси Z будут прокручиваться медленнее, чем элементы, которые имеют положительные значения. Чем дальше значение находится от 0, тем более выражен паралакс — эффект (например translateZ(-10px) будет скролится медленнее, чем translateZ(-1px)) .

Создание различных разделов страницы параллакса

Предыдущие примеры продемонстрировали основные приемы, используя очень простой контент, но большинство сайтов разбиты на отдельные части, в которых мы можем применять различные эффекты. Вот как мы сделаем это.

Во-первых, нам нужен элемент parallax__group , чтобы сгруппировать элементы в группы:

... ... ...

Вот код CSS для элемента группы:

Parallax__group { position: relative; height: 100vh; transform-style: preserve-3d; }

В этом примере, я хочу, чтобы каждая группа заполняла область просмотра. Устанавливаем значение height: 100vh . Однако при необходимости произвольные значения могут быть установлены для каждой группы.

Свойство transform-style: preserve-3d предотвращает сплющивание браузером, а элементы parallax__layer и position: relative используются, чтобы потомки элемента parallax__layer позиционировались относительно элементов группы.

Одно важное правило, которым стоит руководствоваться при группировке элементов — мы не можем обрезать содержимое группы. Установка overflow: hidden для parallax__group будет блокировать эффект.

Необрезанное содержимое приведет к ошибке переполнения элементов-потомков, потому нам нужно позаботиться о значениях z-index для группы, чтобы обеспечить правильное отображение/скрытие контента при прокрутке документа.

Тут нет жестких правил работы со слоями, так как реализации будут отличаться от дизайна к дизайну. Очень просто работать над отладкой проблем со слоями когда вы можете видеть, как работает эффект параллакса — вы можете добиться этого путем применения простой трансформации к элементам группы:

Parallax__group { transform: translate3d(700px, 0, -800px) rotateY(30deg); }

Посмотрите на следующий пример и обратите внимание на опцию отладки!

Демо-режим Поддержка браузерами

• Firefox, Safari, Opera и Chrome поддерживают этот эффект;
• В Firefox все работает, но в настоящее время существует незначительная проблема с выравниванием;
• Internet Explorer еще не поддерживает preserve-3d (появление поддержки вскоре ожидается ), потому паралакс — эффект не поддерживается. Для этого браузера вам придется создать контент без данного эффекта. Но, прогресс не стоит на месте! Дерзайте!

Перевод статьи «Pure CSS parallax scrolling websites » был подготовлен дружной командой проекта

Как вы, наверное, знаете, Параллакс, это визуальный эффект, где позиции объектов выглядят по-разному, когда мы рассматриваем их с разных позиций. Прокрутка с параллакс – эффектом создает иллюзию, что два объекта, которые находятся в прямой видимости, но на расстоянии друг от друга, движутся с различными скоростями. Этот эффект мы видим повсюду, когда мы в движении: когда мы идем по улице, мы видим, что все ближние вещи двигаться гораздо быстрее, чем дальние, когда мы едем за рулём, мы можем видеть, что деревья и кустарники возле дороги проносятся мимо очень быстро, а пейзаж на заднем плане, например горы, движется очень медленно. Этот эффект называется параллакс движения.

Этот эффект может быть применен к веб-страницам: мы можем использовать эффект параллакса для блоков, которые содержат фоновые изображения и некоторое внутреннее содержание. Когда мы прокручиваем страницу, содержание прокручивается, а фон должен оставаться на месте. CSS поможет нам создать этот эффект.

Шаг 1 – HTML Section 1 Simple title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus id nunc ut gravida. Vestibulum ac...

Section 2 Simple title 2

Nam imperdiet posuere bibendum. Aliquam nec consectetur metus. Aliquam egestas a elit at malesuada...

Section 3 Simple title 3

Proin tempor urna vitae tortor porttitor, ac malesuada elit lacinia. Nulla ac tellus nulla. Donec iaculis...

Как вы видите, HTML разметка не сложная, она включает в себя 6 альтернативных разделов: три из них содержат фоновые изображения (разделы с классом parallax), три содержат текст (секции с классом content).

Шаг 2 – Изображения

Все фоновые изображения имеют фиксированный размер 1600 × 600 пикселей. Это позволит нам использовать изображения на большинстве разрешений экрана (респонсивный макет(responsive layout)). Все наши блоки параллакса имеют одинаковую фиксированную высоту (600px).

Шаг 3 – CSS

Теперь нам нужно расширить изображения, чтобы заполнить всё доступное пространство, для этого мы поставили значение background-size: cover , а затем мы устанавливаем background-attachment: fixed , чтобы зафиксировать фон.

Container { max-width: 960px; margin: 0 auto; } section.section:last-child { margin-bottom: 0; } section.section h2 { margin-bottom: 40px; font-family: "Roboto Slab", serif; font-size: 30px; } section.section p { margin-bottom: 40px; font-size: 16px; font-weight: 300; } section.section p:last-child { margin-bottom: 0; } section.section.content { padding: 40px 0; } section.section.parallax { height: 600px; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } section.section.parallax h1 { color: rgba(255, 255, 255, 0.8); font-size: 48px; line-height: 600px; font-weight: 700; text-align: center; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } section.section.parallax-1 { background-image: url("../imgages/1.jpg"); } section.section.parallax-2 { background-image: url("../imgages/2.jpg"); } section.section.parallax-3 { background-image: url("../imgages/3.jpg"); } @media all and (min-width: 600px) { section.section h2 { font-size: 42px; } section.section p { font-size: 20px; } section.section.parallax h1 { font-size: 96px; } } @media all and (min-width: 960px) { section.section.parallax h1 { font-size: 160px; } }

В этой статье показывается, как с помощью CSS трансформаций и махинаций с 3d сделать параллакс-эффект на сайте на чистом CSS.

Параллакс почти всегда создаётся с помощью JavaScript и, чаще всего, получается ресурсоёмким, из-за вешания листенеров на событие скролла, модификации DOM напрямую и срабатывания ненужных перерисовок и перестановок. Всё это происходит асинхронно с потоком, в котором браузер рендерит страницу, из-за чего скролл начинает подтормаживать, а картинка рваться на части. Более правильные реализации параллакса отслеживают скролл и используют отложенные обновления DOM с помощью requestAnimationFrame . Получается качественной другой результат, но почему бы вообще не избавиться от JavaScript?

Перенос параллакс эффекта в CSS спасает от проблем с производительностью и лишних манипуляций, позволяя браузеру самому всё регулировать за счёт аппаратного ускорения. В результате, почти все ресурсоёмкие процессы обрабатываются напрямую браузерным движком. Частота кадров (FPS) остаётся стабильной, а картинка становится плавной. Плюс, можно сразу комбинировать параллакс с другими CSS фишками - media queries или supports. Отзывчивый параллакс - каково?

Теория Прежде, чем погрузиться в понимание работы этого механизма, создадим необходимую разметку:

... ... ...
И базовые стили:

Parallax { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; } .parallax__layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .parallax__layer--base { transform: translateZ(0); } .parallax__layer--back { transform: translateZ(-1px); }
Вся магия происходит в классе parallax . Определение свойств стилей height и perspective установит перспективу элемента в его центре, создав фиксированный 3D вьюпорт. overflow-y: auto позволит контенту внутри элемента нормально скроллиться, при этом потомки элемента будут отрисовываться относительно фиксированной перспективы. В этом и заключается ключ к созданию параллакс эффекта.

Далее, класс parallax__layer . Как и следует из имени, он определяет слой контента, к которому будет применен параллакс эффект. Элемент с этим классом выдирается из общего потока контента и позиционируется так, чтобы заполнить свой контейнер.

Наконец, у нас есть классы-модификаторы parallax__layer--base и parallax__layer--back . Они нужны, чтобы регулировать скорость скролла параллакс элементов, смещая их по оси Z (удаляя или приближая к вьюпорту). Для краткости я сделал всего две скорости скролла - позже мы добавим еще несколько.

Коррекция глубины Так как параллакс эффект создаётся за счёт 3D преобразований, смещение элемента по оси Z имеет побочный эффект - размеры элемента меняются, в зависимости от того, ближе или дальше он к вьюпорту. Чтобы исправить это, нам нужно применять scale() трансформацию, чтобы элемент отрисовывался в своём изначальном размере:

Parallax__layer--back { transform: translateZ(-1px) scale(2); }
Коэффицент скейла можно посчитать по формуле 1 + (translateZ * -1) / perspective) . Например, если перспектива вьюпорта задана как 1px и мы смещаем элемент на -2px по оси Z, то коэффицентом будет scale(3) .

Parallax__layer--deep { transform: translateZ(-2px) scale(3); }

Регулирование скорости слоя Скорость слоя регулируется комбинацией значений перспективы и смещения по Z. Элементы с отрицательными значениями Z будут скроллиться медленнее, чем элементы с положительными значениями. Чем больше разность значения от 0, тем явнее параллакс эффект
(т.е. translateZ(-10px) будет скроллиться медленнее, чем translateZ(-1px)).Создание разных участков параллакс эффекта Предыдущие примеры демонстрировали базовую технику использования простого контента, но ведь большинство параллакс сайтов делят страницу на разные участки с разными эффектами. Вот как можно реализовать это в нашем методе.

Во-первых, нам нужен элемент parallax__group , чтобы сгруппировать наши слои вместе:

... ... ...
для него CSS будет выглядеть так:

Parallax__group { position: relative; height: 100vh; transform-style: preserve-3d; }
В этом примере я хочу, чтобы каждая группа заполнила вьюпорт, поэтому я задаю height: 100vh , хотя, если нужно, число для каждой группы может быть разным. transform-style: preserve-3d не даёт браузеру сделать плоскими элементы с parallax__layer , а position: relative позволяет дочерним parallax__layer элементам позиционироваться относительно их группы.

Важное правило, которое нужно помнить - при группировке элементов мы не можем обрезать контент внутри группы, тк overflow: hidden у элемента parallax__group сломает весь параллакс эффект. Необрезанный контент приведёт к тому, что дочерние элементы будут выступать за рамки. Поэтому нужно пошаманить с значением z-index у группы, чтобы быть уверенным, что контент будет корректно прятаться и показываться по мере того, как пользователь будет скроллить сайт.

Нет никаких жестких или быстрых правил по поводу работы со слоями и разные методы подразумевают разную реализацию. Но, чтобы упростить отладку позиционирования слоёв, можно применить простую трансформацию групповых элементов:

Parallax__group { transform: translate3d(700px, 0, -800px) rotateY(30deg); }
Взгляните на следующий пример и обратите внимание на галочку debug !

P arallax эффект стал популярным после того, как Nike запустил свой сайт «Nike Better World «. Сайт получил множество положительных отзывов от разных ресурсов за свой замечательный эффект параллакс-прокрутки и веб-дизайн.

Параллакс-эффект существовал с 1980-х годов и использовался в видеоиграх, а потом на сайтах.

Примеры сайтов с параллакс-эффектом: что такое параллакс-прокрутка?

Вы уже видели примеры его использования. Перед тем как углубиться в примеры сайтов, использующих параллакс-эффект, уделим немного времени объяснению того, что же он собой представляет.

Параллакс – это видимое смещение или разница в видимом положении объекта, если он просматривается с двух разных точек, не лежащих на одной прямой с объектом. В веб-дизайне под параллаксом понимается техника прокручивания, используемая для создания иллюзии глубины сайта.

Это не новая техника. Но прошло немало времени между её появлением и недавним рывком в трендовые стили. Чтобы показать, как выглядит параллакс-эффект при прокрутке, я собрал сайты, которые используют этот приём.

Посмотрите на примеры:

Учимся создавать дизайн сайта с параллакс-эффектом

Существует четыре метода, которые могут быть использованы для создания сайта с parallax эффектом j Q uery .

• Послойный метод – использование нескольких фоновых изображений, которые могут независимо перемещаться горизонтально или вертикально, и расположены одно над другим.
• Метод спрайтов – использование одного большого изображения, составленного из нескольких, и отображение только части большого изображения в различных позициях. Часто используется в меню навигации.
• Метод повторяющегося шаблона – контент для прокрутки строится из отдельных плиток, которые могут перемещаться над повторяющимся слоем фона.
• Растровый метод – линии пикселей изображения скомбинированы и обновляются сверху вниз с небольшой задержкой между прорисовкой линий.

Руководство по разработке сайта с параллакс-прокруткой

Посмотрите пример

Что вам понадобится для реализации этого примера параллакс-прокрутки:

• Wellfleet (шрифт Google);
• Arvo (шрифт Google );
• Oswald (шрифт Google );
• Goudy Bookletter 1911 (шрифт Google) ;
• Изображения, использованные в этом примере ;
• Рождественские изображения в высоком разрешении. Вы можете загрузить бесплатные изображения отсюда или использовать изображения из архива, ссылка на который приведена выше.

Файловая структура

Для файловой структуры parallax эффект примера мы создадим три папки и один HTML-файл :

• html – будет главным файлом. Весь дизайн будет расположен в этом файле;
• Папка js – для скриптов JavaScript/jQuery ;
• Папка img – для изображений;
• папка css – для CSS-стилей .

HTML -разметка

В файл index.html сначала добавим объявление типа документа HTML5 , а также группу ссылок в заголовок . Туда будет включена ссылка на файл CSS , шрифты Google , а также файл библиотеки jQuery .

Creating a Simple Parallax Scrolling Website

Пропустим код parallax эффекта jQuery и обсудим его позже. А пока продолжим работу с HTML-элементами . Мы добавим тэг header с логотипом и навигацией внутри. Навигация будет вести на определённые слайды. Позже мы добавим эффект плавной прокрутки, чтобы это смотрелось красиво.

PARALLAX

• Slide 1
• Slide 2
• Slide 3
• Slide 4
• Slide 5

Теперь добавим слайды для parallax эффекта в блоке . Мы пометим каждый из них атрибутом ID , который будет соответствовать его порядковому номеру. Внутрь слайда мы поместим блок с классом content, чтобы выровнять элементы по центру.

MERRY CHRISTMAS HAPPY NEW YEAR “Then the Grinch thought of something he hadn"t before! What if Christmas, he thought, doesn"t come from a store. What if Christmas...perhaps...means a little bit more!” Dr. Seuss “I truly believe that if we keep telling the Christmas story, singing the Christmas songs, and living the Christmas spirit, we can bring joy and happiness and peace to this world.” Norman Vincent Peale “Christmas doesn"t come from a store, maybe Christmas perhaps means a little bit more....” Dr. Seuss “My idea of Christmas, whether old-fashioned or modern, is very simple: loving others. Come to think of it, why do we have to wait for Christmas to do that?” Bob Hope Copyright 1stwebdesigner.com

Теперь, когда мы поместили все HTML-элементы на страницу, сайт выглядит вот так.

CSS— стили

Начнём с добавления стилей parallax эффекта для тега body , а также заголовков H1 , H2 и H3 . Мы установим шрифт “Arvo ” для заголовков H1-H2 .

body{ margin: 0; padding: 0; width: 100%; } h1 { font-family: "Arvo"; font-weight: normal; font-size: 55px; text-align: center; color: #fff; margin: 0; padding: 0; } h2 { font-family: "Arvo"; font-weight: normal; font-size: 40px; text-align: center; color: #fff; margin: 0; padding: 0; } h3 { font-family: Oswald; font-weight: normal; font-size: 16px; text-align: center; margin: 5px 0; padding: 0; z-index: 1; position: relative; }

Затем добавим основные стили для позиционирования элементов на экране и контента в слайдах.

Center { margin: 0 auto; } .content{ margin: 0 auto; width: 960px; } .clear { clear: both; }

Теперь стилизуем секцию заголовка parallax эффект примера . Добавим изображение с чёрным фоном и прозрачностью в 60% в заголовок, который будет содержать логотип и навигацию. Логотип разместим слева, а навигацию – справа.

#header { width: 100%; background: url("../img/header-bg.png"); height: 80px; position: fixed; margin-top: 30px; } #nav { width: 410px; float: right; margin-top: 20px; } #logo a { color: #fff; text-decoration: none; float: left; font-size: 30px; margin-top: 20px; color: #fff; font-family: "Wellfleet"; font-weight: bold; } #nav ul{ list-style: none; display: block; margin: 0 auto; list-style: none; } #nav li{ margin-top: 9px; float: left; padding-left: 21px; } #nav li a { color: #fff; opacity:0.6; font-size: 16px; text-decoration: none; font-family: "Wellfleet"; } #nav li a.active { color: #fff; opacity:1; border-bottom: 2px solid #fff; } #nav li a:hover { color: #fff; opacity:1; }

Quotes { font-family: "Goudy Bookletter 1911", serif; font-weight: normal; font-size: 30px; text-align: left; margin: 50px auto; }
.author_name_white { font-family: "Wellfleet"; margin: 70px 0 0 75px; color: #fff; font-size: 20px; } .author_name_gray { font-family: "Wellfleet"; margin: 70px 0 0 75px; color: #94a4a4; font-size: 20px; } .quotes_container { width: 800px; margin: 0 auto; } #christmas_tree { background: url("../img/christmas-tree.png") no-repeat; width: 48px; height: 77px; margin: 0 auto; position: relative; bottom: -35px; } #divider { background: url("../img/divider.png") no-repeat; width: 300px; height: 35px; margin: 0px auto 27px auto; } #ribbon { background: url("../img/ribbon.png") no-repeat; width: 251px; height: 48px; margin: 0 auto; display: block; position: relative; top: -38px; } #snowflakes1 { background: url("../img/snowflakes.png") no-repeat; width: 24px; height: 21px; margin: 0 auto; display: block; position: relative; bottom: -54px; left: -102px; } #snowflakes2 { background: url("../img/snowflakes.png") no-repeat; width: 24px; height: 21px; margin: 0 auto; display: block; position: relative; bottom: -33px; right: -100px; }

Каждый слайд в parallax эффекте jQuery будет иметь фоновое изображение или белый фоновый цвет с фиксированной позицией. Также нужно добавить небольшие отступы к каждому слайду, чтобы выровнять элементы по центру.

#slide1, #slide2 { width: 100%; } #slide1 { background:url("../img/slide1.jpg") 50% 0 no-repeat fixed; color: #fff; height: 600px; margin: 0; padding: 200px 0 260px 0; background-size: cover; } #slide2 { background-color: #fff; color: #333333; height: 300px; margin: 0 auto; overflow: hidden; padding: 200px 0; } #slide3 { background: url(../img/slide3.jpg) 50% 0 no-repeat fixed; color: #fff; height: 600px; padding: 170px 0 0 0; background-size: cover; } #slide4 { background-color: #fff; color: #333333; height: 300px; padding: 200px 0; } #slide5 { background: url(../img/slide5.jpg) 50% 0 no-repeat fixed; height: 200px; margin: 0 auto; padding: 250px 0; color: #fff; background-size: cover; }

#copyright { color: #fff; font-family: "Wellfleet"; font-size: 14px; margin-top: 100px; text-align: center; } #copyright a { text-decoration: none; color: #fff; }

Код jQuery

Вдохнём жизнь в наш сайт с parallax эффектом . В раздел head добавим следующий код jQuery .

$(document).ready(function() { $("a").each(function() { if (location.pathname.replace(/^//,"") == this.pathname.replace(/^//,"") && location.hostname == this.hostname && this.hash.replace(/#/,"")) { var $targetId = $(this.hash), $targetAnchor = $(""); var $target = $targetId.length ? $targetId: $targetAnchor.length ? $targetAnchor: false; if ($target) { var targetOffset = $target.offset().top; $(this).click(function() { $("#nav li a").removeClass("active"); $(this).addClass("active"); $("html, body").animate({scrollTop: targetOffset}, 1000); return false; }); } } }); });

В этой части parallax эффекта jQuery мы создаём обработчик нажатия на любую из ссылок, имеющих символ “# ” где-либо в атрибуте href . В следующей строке мы проверяем, ведёт ли ссылка на ту же страницу, ища совпадения в location.pathname . Так мы уверены, что код будет работать как со ссылками, включающими в себя полный URL , так и с теми, которые состоят только из идентификатора.

$(document).ready(function() { $("a").each(function() { if (location.pathname.replace(/^//,"") == this.pathname.replace(/^//,"") && location.hostname == this.hostname && this.hash.replace(/#/,"")) { var $targetId = $(this.hash), $targetAnchor = $(""); var $target = $targetId.length ? $targetId: $targetAnchor.length ? $targetAnchor: false; if ($target) { var targetOffset = $target.offset().top;

В этой части кода обрабатывается нажатие пользователя на ссылку в меню. При этом класс active удаляется из текущей активной ссылки меню и добавляется к той ссылке, по которой перешел пользователь. Также произойдёт прокрутка страницы к соответствующему блоку.

$(this).click(function() { $("#nav li a").removeClass("active"); $(this).addClass("active"); $("html, body").animate({scrollTop: targetOffset}, 1000); return false; }); } } });
});

Совет : Можно делать скорость эффекта прокрутки быстрее или медленнее, меняя значение 1000 (1000 миллисекунд ). Можно попробовать значения “fast ” (200 миллисекунд ) или “slow ” (600 миллисекунд ). Обратите внимание, что значение по умолчанию 400 миллисекунд .

$("html, body").animate({scrollTop: targetOffset}, 1000);

Этот эффект можно сделать самому.

Заключительные слова о параллакс-эффекте

Прокрутка с parallax эффектом постепенно внедряется на множестве сайтов. В этой статье я показал, как реализовать простой эффект параллакс-прокрутки. Вы можете поэкспериментировать с ним и улучшить его.

Перевод статьи “ How To Build a Simple Parallax Website ” был подготовлен дружной командой проекта .

Хорошо Плохо

Эффект параллакса - очень интересная техника. При прокручивании фоновое изображение перемещается медленнее чем, содержание, а в результате получается иллюзия 3D пространства. В данном уроке мы продемонстрируем простой и эффективный способ получить замечательный эффект.

Разметка

Данная техника базируется на управлении скоростью перемещения фонового изображения. Создадим разметку HTML, содержащую две секции с атрибутами "data-type" и "data-speed" . Назначение атрибутов раскроется чуть позже:

Теги с атрибутами data-type и data-speed позволяют сделать разметку простой и понятной.

В соответствии со спецификацией любые атрибуты, начинающиеся на data- будут обрабатываться как хранилище частных данных. Дополнительно, они не оказывают влияния на шаблон.

Так как нам нужно управлять скоростью прокручивания фоновых изображений, то для ключевых параметров мы будем использовать data-type="background" и data-speed="10" .

Затем добавим тег в каждый тег .

Абсолютное позиционирование Простой эффект параллакса

Мы будем прокручивать фон тега медленнее, чем его содержание, то есть . Таким образом создается иллюзия параллакса.

CSS

Прежде, чем перейти к магии jQuery добавим фоновые изображения для каждого элемента в коде CSS.

#home { background: url(home.jpg) 50% 0 repeat fixed; min-height: 1000px; } #about { background: url(about.jpg) 50% 0 no-repeat min-height: 1000px; }

И определим стили для остальных элементов нашей демонстрационной страницы.

#home { background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; } #home article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%; } #about { background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); box-shadow: 0 0 50px rgba(0,0,0,0.8); } #about article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%; }

Магический код

Используем jQuery. Начнем со стандартного метода document.ready() , чтобы быть в уверенности о загрузке страницы и ее готовности к манипуляциям.

$(document).ready(function(){ });

Теперь нужно внимание. Первое, что здесь происходит - итерация по всем элементам с атрибутом data-type="background" на странице.

$(document).ready(function(){ $("section").each(function(){ var $bgobj = $(this); // Назначаем объект }); });

В функцию.each() добавим другую функцию.scroll() , которая вызывается в момент начала прокрутки.

$(window).scroll(function () {

Нужно определить на сколько пользователь прокрутил страницу, и затем разделить полученное значение на величину, определяемую в атрибуте data-speed .

Var yPos = -($window.scrollTop() / $bgobj.data("speed"));

$window.scrollTop() - получаем текущее значение прокрутки сверху. $bgobj.data("speed") ссылается на атрибут data-speed в разметке. yPos - окончательное значение, которое используется для прокрутки. Однако, используется отрицательное значение, так как фон смещается в обратном направлении по отношению к прокрутке пользователя.

В нашем примере атрибут data-speed имеет значение 10. Предположим, что окно браузера прокручивается на 57px . Это означает, что 57px делится на 10 = 5.7px .

// Собираем положение фона var coords = "50% "+ yPos + "px"; // Смещаем фон $bgobj.css({ backgroundPosition: coords });

Теперь надо собрать все данные в одно значение. Чтобы сохранить горизонтальное положение фона статичным, мы используем значение 50% для его свойства xPosition . Затем добавляем yPos в качестве значения свойства yPosition , а затем присваиваем координаты фону : $bgobj.css({ backgroundPosition: coords }); .

В окончательном виде код будет выглядеть так:

$(document).ready(function(){ $("section").each(function(){ var $bgobj = $(this); // Назначаем объект $(window).scroll(function() { var yPos = -($window.scrollTop() / $bgobj.data("speed")); // Собираем значение координат фона вместе var coords = "50% "+ yPos + "px"; // Смещаем фон $bgobj.css({ backgroundPosition: coords }); }); }); });

Фиксатор для IE

Остается один момент: старые версии IE не могут вывести теги и . Дело легко поправить, мы будем использовать стандартное решение для создания элементов, которое магическим образом заставит браузер распознавать теги HTML5.

// Создаем элементы для IE document.createElement("article"); document.createElement("section");

Дополнительно мы используем файл сброса CSS , чтобы все браузеры выводили страницу одинаково.