Секции параллакс как слоеный пирог. Параллакс-скроллинг и его применение в веб-дизайне. Вот и все

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 .

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

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

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

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

Параллакс-скроллинг – что за зверь?

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

Термин происходит от греческого «Parallaxis», что означает «изменение». Сегодня эта тенденция заново прокладывает себе путь в мире веб-дизайна.

Параллакс-скроллинг может быть как стандартным, вертикальным, так и горизонтальным, и с изменяющимся направлением.

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

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

Где применять?

Параллакс-скроллинг смотрится отлично на тех сайтах, где мало контента. Это идеальное решение для одностраничников, сайтов-визиток.

Допустим, у вас есть только краткая информация о компании, контакты и несколько фотографий. Простой сайт будет выглядеть с таким наполнением скучно и неинтересно. Но вот если добавить сюда необычные эффекты типа параллакса – этот ресурс запомнится пользователям надолго!

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

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

Несколько примеров

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

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

Страница, как видите, движется с одной скоростью, а геометрические фигуры – с другой, немного медленнее.

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

Добро пожаловать в Милан! Окунитесь в мир итальянского искусства!

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

Можно также переходить по списку внизу, сайт сам покажет вам нужное место.

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

А вот – интересный вариант сайта ресторана. Тут мало текстового контента, и дизайнер нашел гениальное решение – совместить его с яркими фотографиями, которые расположены на другом слое и движутся с иной скоростью. Довольно свежо и оригинально.

Тут мы видим замечательные 3D-эффекты, для создания которых использовано и видео на заднем плане, и фото разного размера, и даже размытие тех элементов, которые словно находятся прямо «перед носом» пользователя. И разная скорость движения слоев, конечно же.

Яркий пример нестандартного подхода к параллаксу. Движущийся сам по себе фон в сочетании с текстом, который прокручивается вниз; 3D-модели, создающиеся справа; меняющиеся цвета фона при прокрутке – все это делает сайт по-настоящему незабываемым.

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

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

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

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

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

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

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

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

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

HTML

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

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

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

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

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

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

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

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

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

Prev Next Вот и все

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

Prev

Как видите к всем объектам на этой странице уже присвоены классы, которые далее мы будем использовать в стилях. А так же у нас тут уже есть 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; });

ι

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

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

ИСХОДНИКИ

подключается рarallax эффект проще простого и работает при подключенной библиотеке jQuery.
В архиве версия jQuery — jquery-1.11.3.min.js Но данный эффект параллакса работает как с более новыми версиями библиотеки jQuery, так и с более старыми. Проверял!

Поэтому подключаем к HTML документу сначала jQuery , а после сам скрипт parallax.min.js

Выглядит подключение вот так:

Ну а теперь HTML CSS подключение параллакса

Берите блок, это может быть header , section , div , footer .
Блок div , в частности, называйте любым классом, и присваивайте:
width: 100%
min-height: 400px;
Хотя это не принципиально.

HTML
section class="parallax"
CSS .parallax { min-height: 400px; background: transparent; } Обязательные атрибуты параллакса

data-parallax="scroll" — нужен для срабатывания скрипта;
data-image-src="img/bg_4.jpg — картинка, точнее путь к картинке;
На странице разработчика указан полный список атрибутов.

class="parallax" — любой класс, об этом написано выше.
section class="parallax" — надпись внутри блока с parallax эффектом, в данном случае заголовок.

Вот и всё

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

Эффект параллакса - очень интересная техника. При прокручивании фоновое изображение перемещается медленнее чем, содержание, а в результате получается иллюзия 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 , чтобы все браузеры выводили страницу одинаково.