Создаём parallax scrolling эффект с помощью jQuery и CSS. Параллакс эффект

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

Подключаем jQuery

$.stellar();

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

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

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

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

Как и в случае с параллаксом элементов, 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!

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-2 sun" data-stellar-ratio="1.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!

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-3 sun" data-stellar-ratio="2"> 2017

* { 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, // обязательно, чтобы не было горизонтального сдвига }); });

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

В последнее время, сайты с parallax scrolling эффектом стали появляться повсюду. Я не хотел это пропускать, поэтому я создал демонстрационную страницу с parallax scrolling эффектом с помощью jQuery и CSS.

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

В Safari прокрутка происходит плавно (по крайней мере, у меня на компьютере), но демо должно работать в любом современной браузере.

Disclaimer 1: Так как это всё лишь эксперимент, я не проводил оптимицацию демо для работы на мобильных устройствах.

Disclaimer 2: Навигационное меню, которое используется в демонстрации, подсмотрено на сайте Nike Better World. Если вы планируете использовать аналогичную навигацию на своём сайте, имейте в виду её происхождение.

/* передний слой (воздушный шар/изображение пейзажа) */ #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; } /* и так далее… */
Всего несколько строк кода с использованием jQuery нужно для создания parallax scrolling эффекта. Я был удивлён, насколько это просто.

$(window).bind("scroll",function(e){ parallaxScroll(); }); 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"); }
Слой переднего плана всегда выравниваются по верхней части документа, в то время как движение других слоев регулируется в зависимости от их глубины.
Чем ниже слой, тем медленнее он движется.

Остальной jQuery код используется для управления навигацией. Когда пользователь нажимает навигационную кнопку, страница прокручивается до соответствующей статьи. В случае, если у пользователя отключен JavaScript, в дело вступают «якоря» используемые на ссылках. Они по-прежнему позволяют перемещаться по странице, но уже без анимации.

Узнайте, как создать эффект прокрутки «параллакса» с помощью CSS.

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

Примечание: Прокрутка параллакса не всегда работает на мобильных устройствах/смартфонах. Однако для отключения эффекта от мобильных устройств можно использовать запросы мультимедиа (см. Последний пример на этой странице).

Используйте элемент контейнера и добавьте фоновое изображение в контейнер с определенной высотой. Затем используйте background-attachment: fixed для создания фактического эффекта параллакса. Другие свойства фона используются для идеального центрирования и масштабирования изображения:

.parallax {
/* The image used */
background-image: url("img_parallax.jpg");

/* Set a specific height */
height: 500px;

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

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

body, html {
height: 100%;
}

Parallax {
/* The image used */
background-image: url("img_parallax.jpg");

/* Full height */
height: 100%;

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Скорость прокрутки слоёв */ 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; });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

javascript в деле

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

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