Плавный параллакс. Параллакс эффект

Все советы

Всем привет. Сегодня расскажу вам о небольшом скрипте для создания простого parallax эффекта.

Статья будет короткой, но информативной, так что уже минут через 15 вы сможете добавить параллакс на свой лендинг. Если вы давно хотели добавить этот интересный эффект на сайт, то читайте дальше…

Что такое параллакс эффект на сайте

Давайте сначала расскажу о том, что это вообще такое. Итак, параллакс эффект в веб дизайне — это такой прием, при котором фоновое изображение двигается медленнее, чем элементы, которые находятся над ним. Для более опытных оговорюсь, что мы не будем «привязывать» эффект параллакса к курсору мыши. а просто создадим parallax фона. Приступим.

Как сделать параллакс эффект на сайте

Итак, первым делом подключаем библиотеку jquery. Как обычно, между тегами head:

Теперь, нужно скачать подключить скрипт Simple Parallax Scrolling . Я рекомендую использовать сразу сжатую версию, так как дополнительных настроек внутри скрипта делать не понадобится:

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

Smartlanding Создание landing page

Data-parallax="scroll"

Data-image-src="путь к картинке/bg.png"

Обратите внимание, что картинка не кладется в шапку при помощи тега img, а задается непосредственно в атрибутом в том контейнере, в котором хотим реализовать parallax.

На этом, в принципе, можно заканчивать, но еще пару слов:

Если в dive, в котором хотим реализовать параллакс эффект нет других элементов, то необходимо задать ему высоту, иначе ничего не увидите.
В случае использования не адаптивного дизайна, можно задать ширину и высоту изображения прямо в html при помощи атрибутов naturalWidth и naturalHeight.
Можно двигать изображения при помощи атрибута data-position. Это аналог background-position в css.

С остальными опциями можете ознакомиться на официальной страничке проекта, которая указана выше.

В этой статье показывается, как с помощью 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 !

Здравствуйте, дорогие читатели блога . Сегодня я хочу рассказать Вам как сделать параллакс при прокрутке страницы с помощью JQuery и CSS3.

Для начала хочется сказать, что данный эффект действительно очень эффективно выглядит. И очень широко используется в зарубежном интернете. Благодаря этому параллаксу создаётся, так сказать эффект углубления и присутствия. Всё это заставляет пользователей заходить на этот сайт всё больше, просто чтобы полюбоваться его красотой.

Вы, наверное, помните, что я показывал несколько примеров таких сайтов, которые используют параллакс при прокрутке страницы. Если Вы пропустили эту подборку, то обязательно посмотрите её она находится .

Посмотрели? Захотели себе? :-) Давайте создавать.

И так, поехали.

Как это работает?

Друзья, как оказалось, ничего тут сверхъестественного и тяжёлого нет. Сначала создаётся HTML страница. Затем создаются или рисуются объекты, например в Фотошопе. После того как всё уже создано, нужно сразу определиться где какой объект будет находится на странице, а также с какой скоростью он будет прокручиваться при прокрутке страницы пользователем.

После с помощью CSS создаётся, например, три слоя (может быть больше) 1,2 и 3. Далее на каждый слой вставляются уже готовые объекты. Этим объектам задают точную позицию на странице в пикселях. А затем уже устанавливают скорость прокрутки для каждого слоя. Обычно 1 слой (дальний) прокручивается медленнее чем второй и так далее. Ещё один важный момент в том, что для каждого слоя выставляется z-index. Этот параметр определяет какой за каким будет находится объект.

Другими словами у нас получается такой вот слоёный сайт:-) Но выглядит очень красиво.

HTML

Для начала нужно создать HTML страницу:

Параллакс при прокрутке страницы Пример параллакса при прокрутке

Облачно, слабый дождь View
Переменная облачность View
Грозовые дожди View
Вот и все View

Облачно, слабый дождь

Здес пример текста для описания прогноза погоды

Next Переменная облачность

Здесь пишем второй пример для переменной облачности

Prev Next Грозовые дожди

Третий пример для грозовых дождей

Prev Next Вот и все

Это пример параллакса при прокрутке

Как видите к всем объектам на этой странице уже присвоены классы, которые далее мы будем использовать в стилях. А так же у нас тут уже есть 3 слоя, которые имеют классы:

parallax-bg3 — первый слой, самый верхний.
parallax-bg2 — второй слой, средний.
parallax-bg1 — и третий слой, самый нижний.

И к каждому из трёх слоёв уже присвоены готовые рисунки (объекты).

Ещё на странице у нас есть текст, у которого прокрутка стандартная. У него тоже позиция зафиксированная но прокручивается он вместе с бэкграундом. Хотя для текста можно тоже установить скорость прокрутки, но нужно создавать отдельный четвёртый слой.

Между тегами и не забудьте прикрепить стили, а также сам скрипт параллакса:

Теперь самое интересное.

CSS

Для начала нужно убрать все отступы на краях страницы. Это делается следующим образом:

Body { background: url(../img/strange_bullseyes.png) repeat 100% 0; overflow-x: hidden; height: 4550px; line-height: 1.5; color: #000; font-size: 14px; font-family: Arial,sans-serif; }

Так же мы здесь задали бэграунд для страницы, он находится в исходниках, и задали точную высоту для страницы, она равна 4550px.

Теперь для поля #wrapper где будут находится все наши объекты нужно задать position: relative;. Таким образом мы показываем нашим рисункам где находится наше поле.

#wrapper { position: relative; }

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

А вот сам код CSS навигации:

Nav#primary { z-index: 5; position: fixed; top: 50%; right: 16px; margin-top: -40px; } nav#primary li { position: relative; height: 20px; } nav#primary a { display: block; width: 20px; height: 20px; text-indent: -9999px; background: transparent url("../img/nav-dot.png") 4px 4px no-repeat; } nav#primary a:hover, nav#primary a.active { background: transparent url("../img/nav-dot.png") 4px -16px no-repeat; } nav#primary h1 { position: absolute; right: 22px; top: -7px; display: none; padding: 4px 20px 4px 7px;; color: #fff; white-space: nowrap; background: transparent url("../img/nav-arrow.png") 100% 50% no-repeat; } nav.next-prev { margin: 20px 0 0 0; } a.prev, a.next { display: block; width: 15px; height: 11px; text-indent: -9999px; } a.prev { margin: 0 auto 5px auto; background: transparent url("../img/scroll-arrow-up.png") 0 0 no-repeat; } a.prev:hover { background: transparent url("../img/scroll-arrow-up.png") 0 -11px no-repeat; } a.next { margin: 5px auto 0 auto; background: transparent url("../img/scroll-arrow-down.png") -1px 0 no-repeat; } a.next:hover { background: transparent url("../img/scroll-arrow-down.png") -1px -11px no-repeat; }

Ну а сейчас переходим к самим слоям

Слой текста и его позиции:

#content { z-index: 4; position: relative; max-width: 940px; padding: 0 10px; margin: 0 auto; line-height: 1.7; } #content article { width: 300px; } #manned-flight , #frameless-parachute, #english-channel, #about { padding-top: 105px; } #manned-flight { position: absolute; top: 0px; } #frameless-parachute { position: absolute; top: 1090px; } #english-channel { position: absolute; top: 2180px; } #content h1 { margin: 0 0 25px 0; font-size: 60px; font-family: Georgia, serif; font-weight: normal; line-height: 65px; } #about { position: absolute; top: 3270px; }

Как видите, что для самого верхнего текста (#manned-flight) задана абсолютная позиция в 0 пикселей, а для второго текста (#frameless-parachute) позиция равна 1090px, что существенно ниже. Ещё один важный момент, для контента задан z-index: 4; самый верхний слой. Это делается для того, чтобы другие слои не закрывали текст.

Сейчас будем создавать слои из картинок:

Первый слой — самые большие облака (#parallax-bg3):

#parallax-bg3 { z-index: 3; position: fixed; left: 50%; top: 0; width: 940px; margin-left: -470px; } #bg3-1 { position: absolute; top: -111px; left: 355px; } #bg3-2 { position: absolute; top: 812px; left: 321px; } #bg3-3 { position: absolute; top: 1628px; left: 403px; } #bg3-4 { position: absolute; top: 2700px; left: -85px; }

Второй слой облаков:

#parallax-bg2 { z-index: 2; position: fixed; left: 50%; top: 0; width: 1200px; margin-left: -600px; } #bg2-1 { position: absolute; top: 162px; left: 200px; } #bg2-2 { position: absolute; top: 300px; left: 1150px; } #bg2-3 { position: absolute; top: 543px; left: -35px; } #bg2-4 { position: absolute; top: 1180px; left: 250px; } #bg2-5 { position: absolute; top: 900px; left: 890px; }

И третий самый последний слой:

#parallax-bg1 { z-index: 1; position: fixed; left: 50%; top: 0; width: 1200px; margin-left: -600px; } #bg1-1 { position: absolute; top: 85px; left: -270px; } #bg1-2 { position: absolute; top: 440px; left: 795px; } #bg1-3 { position: absolute; top: 900px; left: -220px; } #bg1-4 { position: absolute; top: 1020px; left: 450px; }

Теперь давайте посмотри как будет выглядеть наш целый файл CSS с исходников:

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Общее *****************************************************************/ html { overflow-y: scroll; } body { background: url(../img/strange_bullseyes.png) repeat 100% 0; overflow-x: hidden; height: 4550px; line-height: 1.5; color: #000; font-size: 14px; font-family: Arial,sans-serif; } h1 { color: #333; } a, a:link, a:active, a:visited { -webkit-transition: color 0.25s ease-out; -moz-transition: color 0.25s ease-out; -o-transition: color 0.25s ease-out; transition: color 0.25s ease-out; color:#21a97e; outline: none; text-decoration:none; } a:hover { color:#000; } img { display:block; } p { margin:1em 0; } /* Линии *****************************************************************/ hr { margin: 0; border: none; border-top: 1px solid #3b3b3b; border-bottom: 1px solid #3b3b3b; height: 3px; } /* Структура страницы *****************************************************************/ #wrapper { position: relative; } #branding { width: 100%; background: #fff; } #branding h1 { width: 940px; padding: 10px 15px; margin: 0 auto; text-transform: uppercase; font-size: 18px; font-weight: bold; } /* Навигация *****************************************************************/ nav#primary { z-index: 5; position: fixed; top: 50%; right: 16px; margin-top: -40px; } nav#primary li { position: relative; height: 20px; } nav#primary a { display: block; width: 20px; height: 20px; text-indent: -9999px; background: transparent url("../img/nav-dot.png") 4px 4px no-repeat; } nav#primary a:hover, nav#primary a.active { background: transparent url("../img/nav-dot.png") 4px -16px no-repeat; } nav#primary h1 { position: absolute; right: 22px; top: -7px; display: none; padding: 4px 20px 4px 7px;; color: #fff; white-space: nowrap; background: transparent url("../img/nav-arrow.png") 100% 50% no-repeat; } nav.next-prev { margin: 20px 0 0 0; } a.prev, a.next { display: block; width: 15px; height: 11px; text-indent: -9999px; } a.prev { margin: 0 auto 5px auto; background: transparent url("../img/scroll-arrow-up.png") 0 0 no-repeat; } a.prev:hover { background: transparent url("../img/scroll-arrow-up.png") 0 -11px no-repeat; } a.next { margin: 5px auto 0 auto; background: transparent url("../img/scroll-arrow-down.png") -1px 0 no-repeat; } a.next:hover { background: transparent url("../img/scroll-arrow-down.png") -1px -11px no-repeat; } /* Параллакс *****************************************************************/ /* content */ #content { z-index: 4; position: relative; max-width: 940px; padding: 0 10px; margin: 0 auto; line-height: 1.7; } #content article { width: 300px; } #manned-flight , #frameless-parachute, #english-channel, #about { padding-top: 105px; } #manned-flight { position: absolute; top: 0px; } #frameless-parachute { position: absolute; top: 1090px; } #english-channel { position: absolute; top: 2180px; } #content h1 { margin: 0 0 25px 0; font-size: 60px; font-family: Georgia, serif; font-weight: normal; line-height: 65px; } #about { position: absolute; top: 3270px; } /* foreground (Первые, большие облака) */ #parallax-bg3 { z-index: 3; position: fixed; left: 50%; top: 0; width: 940px; margin-left: -470px; } #bg3-1 { position: absolute; top: -111px; left: 355px; } #bg3-2 { position: absolute; top: 812px; left: 321px; } #bg3-3 { position: absolute; top: 1628px; left: 403px; } #bg3-4 { position: absolute; top: 2700px; left: -85px; } /* midground (Облака) */ #parallax-bg2 { z-index: 2; position: fixed; left: 50%; top: 0; width: 1200px; margin-left: -600px; } #bg2-1 { position: absolute; top: 162px; left: 200px; } #bg2-2 { position: absolute; top: 300px; left: 1150px; } #bg2-3 { position: absolute; top: 543px; left: -35px; } #bg2-4 { position: absolute; top: 1180px; left: 250px; } #bg2-5 { position: absolute; top: 900px; left: 890px; } /* background (Облака) */ #parallax-bg1 { z-index: 1; position: fixed; left: 50%; top: 0; width: 1200px; margin-left: -600px; } #bg1-1 { position: absolute; top: 85px; left: -270px; } #bg1-2 { position: absolute; top: 440px; left: 795px; } #bg1-3 { position: absolute; top: 900px; left: -220px; } #bg1-4 { position: absolute; top: 1020px; left: 450px; }

JQuery

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

/* Скорость прокрутки слоёв */ function parallaxScroll(){ var scrolled = $(window).scrollTop(); $("#parallax-bg1").css("top",(0-(scrolled*.25))+"px"); $("#parallax-bg2").css("top",(0-(scrolled*.5))+"px"); $("#parallax-bg3").css("top",(0-(scrolled*.75))+"px"); }

Как видите, что для самого верхнего слоя parallax-bg3 самая высокая скорость прокрутки, Для второго слоя самая низкая, и для последнего слоя средняя скорость.

Теперь вот как выглядит скрипт для самой навигации:

$("a.manned-flight").click(function(){ $("html, body").animate({ scrollTop:0 }, 1000, function() { parallaxScroll(); }); return false; }); $("a.frameless-parachute").click(function(){ $("html, body").animate({ scrollTop:$("#frameless-parachute").offset().top }, 1000, function() { parallaxScroll(); }); return false; }); $("a.english-channel").click(function(){ $("html, body").animate({ scrollTop:$("#english-channel").offset().top }, 1000, function() { parallaxScroll(); }); return false; }); $("a.about").click(function(){ $("html, body").animate({ scrollTop:$("#about").offset().top }, 1000, function() { parallaxScroll(); }); return false; });

Вот в принципе и всё, друзья. Если у Вас возникну какие либо вопросы, спрашивайте в комментариях. До скорых встреч.

Делаем параллакс-эффект для больших блоков с фоном и для отдельных элементов на сайте.

Подключаем jQuery

$.stellar();

Parallax для элементов

Задаем скорость прокрутки для элементов

Задаем соотношение относительно стандартной скорости прокрутки.
Ratio 0.5 приведет к тому, что элемент будет прокручиваться с половинной скорость,
ratio 1 не будет иметь никакого эффекта,
ratio 2 приведет к тому, что элемент будет прокручиваться с удвоенной скоростью.

Если коэффициент меньше 1 вызывает ошибки в отображении элементов на странице, попробуйте задать для этого элемента position: fixed; .

Parallax для фона

Если необходимо, чтобы фоновое изображение прокручивалось вслед за прокруткой страницы, тогда нужно добавить следующий атрибут:

Как и в случае с параллаксом элементов, ratio – это соотношение к стандартной прокрутке.

Для коэффициента меньше 1, чтобы избежать ошибок в отображении фона, лучше установить для background-attachment значение fixed .

На мобильных телефонах параллакс для фона лучше не использовать.

Кстати background-attachment: fixed на мобильных так же может не сработать из-за сложности вычислений, поэтому нужно для мобильных (@media (max-width: 768px)) задать background-attachment: scroll .

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

Чтобы параллакс не срабатывал на мобильных устройствах (@media (max-width: 768px)), можно задать для блока свойство background-position: center center !important; .

Когда я тестировал горизонтальный параллакс и Offsets, то у меня возникло много вопросов, но я их отложил на потом и этот плагин использовал только для вертикального параллакса.

Может быть проблемы с IE из-за background-attachment: fixed; – фон может двигаться рывками при скролле.
Нужно использовать отдельные условия для IE:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .next-gen{background-attachment: scroll !important; background-position: 0 0 !important;} }

Примитивный пример для тестирования

Hic magnam eaque, mollitia delectus ullam cum possimus voluptatem. Et in commodi quam, consequatur magnam, dolorum odio tenetur, omnis possimus nihil suscipit. Earum quo, architecto laboriosam quisquam facilis fugit voluptates..png" alt="Sun" class="sun-1 sun" data-stellar-ratio=".4">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corporis quo ducimus veniam debitis, blanditiis modi voluptatum laudantium nemo inventore veritatis cum, ex dolorem necessitatibus, quae quos nam, molestiae est.

Ea sint dolor nemo at dicta enim optio omnis molestias voluptatum rem, cumque provident ad eum. Delectus aperiam cumque, dolorum blanditiis, hic error quos reiciendis. Recusandae distinctio voluptas quidem ab!

* { margin: 0; padding: 0; border: 0; box-sizing: border-box; } body { font-size: 1em; font-family: sans-serif; } div { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; height: 600px; background-size: cover; z-index: 2; overflow: hidden; } ..jpg) 50% 50% no-repeat; } ..jpg) 50% 50% no-repeat; } ..jpg) 50% 50% no-repeat; } .block-text { padding: 60px 30px; height: auto; font-size: 1.6em; line-height: 1.4; } p { position: relative; z-index: 2; max-width: 960px; margin: 0 auto; } .sun { position: absolute; z-index: 1; } .sun-1 { right: 0; top: 20%; } .sun-2 { left: 0; top: 20%; } .sun-3 { left: 50%; margin-left: -200px; top: 20%; } footer { background-color: #000; color: #fff; text-align: center; padding: 20px 0; }

Подключаем необходимые библиотеки

В файле js/common.js такое содержимое

$(function() { // Parallax background // http://markdalgleish.com/projects/stellar.js/docs/ $.stellar({ responsive: false, horizontalScrolling: false, // обязательно, чтобы не было горизонтального сдвига }); });

Рабочий пример:

Параллакс-эффект, также называемый параллакс-скроллингом, представляет собой особую технику, используемою в первую очередь в компьютерной графике, когда фоновые изображения в перспективе двигаются медленнее, чем двигаются элементы, расположенные на переднем плане. Сегодня подобная техника очень актуальна и распространена в области веб-дизайна. Раньше она была широко применима в игровой индустрии (10-15 лет назад).

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

Технология эта прижилась в сфере дизайна только потому, что она выглядит действительно креативно и круто. Несмотря на растущую популярность, этот эффект всегда можно реализовать как-то по особому и очень успешно. Иногда, при прокрутке, фоновое изображение также изменяется, но это не обязательное требование. Лучшая сторона данного эффекта заключается в том, что он состоит из нескольких слоев изображений, которые как бы «наложены» друг на друга, и все они двигаются с разной скоростью, что создает эффект трехмерного пространства.

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

Когда они видят этот эффект в первый раз, им кажется, что этот эффект очень интересный. Но после того, как они проведут больше времени на сайте, где используется параллакс-эффект, они понимают, что это нечто большее, чем просто «интересный».

Проблемы с производительностью

Хотя эффект и выглядит превосходно, у него есть некоторые отрицательные стороны, как например проблемы с производительностью. В те времена, когда Nike создали с использованием данного эффекта, это было реализуемо только посредством применения javascript/jQuery, что в значительной степени утяжеляло страницу, и понижало скорость ее загрузки. Но тогда недостатки в производительности списывали за счет превосходного внешнего вида сайта. Это означало, что удобство пользования сайтом напрочь пропадало, так как он загружался неимоверно медленно. Это и стало самой большой проблемой.

javascript сложно воспроизводить, так как технология должна управлять расположением всех элементов на странице. Хотя это и не кажется такой уж и сложной задачей, на самом деле это очень сложно. javascript нужно проводить вычисления для каждого пикселя на странице сайта, который прокручивают скроллингом. В зависимости от скорости прокрутки страницы, количество вычислений может достигать 100 в секунду. И учтите, что каждый элемент на странице управляется javascript в то же время, когда и проводятся вычисления. Не удивительно, что эффект параллакс было не только сложно разрабатывать, но и так же сложно подгрузить, если соединение с интернетом было медленным.

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

Технологии новой эры

Хотя данный эффект не так-то просто разработать, существуют различные решения. С выходом CSS3, создание эффекта параллакс в значительной степени облегчилось.

Суть проста. Весь ваш контент размещен на одной странице, и перемещение по «под-страницам» осуществляется посредством CSS3-перехода. В целом, это принцип работы старой доброй техники с переходом по якорным ссылкам, но на этот раз к этому добавляется переход. Ниже вы можете видеть отличный пример!

Как вы могли заметить, весь контент размещен на одной и той же странице, и перемещение от одной «страницы» к другой происходит посредством CSS3-перехода. Это почти такой же эффект, что и параллакс, но в бесконечное количество раз легче с точки зрения загруженности страниц в браузере.

Но здесь все-таки есть некоторое отличие. Насколько нам известно, практически невозможно (или по крайней мере очень сложно) заставить элементы одной и той же страницы двигаться с разной скоростью, если использовать CSS3-переход. Это значит, что настоящий параллакс эффект невозможно полноценно скопировать за счет свойств только лишь CSS3.

Здесь также есть еще один недостаток – CSS3 не поддерживается некоторыми современными браузерами. По крайней мере, пока что. Это означает, что для создания полноценного эффекта параллакс все равно пока еще необходимо использовать javascript.

javascript в деле

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

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

jParallax описывают как jQuery-плагин, который превращает элементы на странице в абсолютно позиционированные слои, которые двигаются в соответствии с передвижением мыши. Слои перемещаются на разной скорости, и это зависит от их размеров.

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

Обучающие статьи посвященные параллакс-скроллингу

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

: (Параллакс-скроллинг на jQuery)

: (Разрабатываем платформу с прокруткой в стиле параллакс)

: (Обучающая статья по разработке шапки сайта, анимированной в стиле параллакс)

: Build a Parallax Scrolling Website Interface With jQuery and CSS ()

Плавный параллакс. Параллакс эффект

Популярные статьи

Последние статьи

Разделы

Страницы

Спецпроекты

Контакты