—»     —»   Параллакс-скроллинг и его применение в веб-дизайне
  Раздел: Анимация, Web-дизайн   Комментариев: 5  

Параллакс-скроллинг и его применение в веб-дизайне



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

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

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

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

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

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

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

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

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

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

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

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

Параллакс-скроллинг и его применение в веб-дизайне

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

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

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

javascript в деле

: jQuery-эффект параллакс-скроллинга

Параллакс-скроллинг и его применение в веб-дизайне

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

: Scrolldeck

Параллакс-скроллинг и его применение в веб-дизайне

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

: jParallax

Параллакс-скроллинг и его применение в веб-дизайне

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

: jQuery Scroll Path

Параллакс-скроллинг и его применение в веб-дизайне

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

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

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

: Parallax Scrolling: An Introduction (Знакомство с Parallax Scrolling)

Параллакс-скроллинг и его применение в веб-дизайне

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

Параллакс-скроллинг и его применение в веб-дизайне

: Building a Parallax Scrolling Story Framework (Разрабатываем платформу с прокруткой в стиле параллакс)

Параллакс-скроллинг и его применение в веб-дизайне

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

Параллакс-скроллинг и его применение в веб-дизайне

: Build a Parallax Scrolling Website Interface With jQuery and CSS (Создание интерфейса веб-сайта в стиле параллакс-скроллинга на jQuery и CSS)

Параллакс-скроллинг и его применение в веб-дизайне

: Fluid CSS3 Slideshow with Parallax Effect (Резиновый CSS3-слайд-шоу с эффектом параллакса)

Параллакс-скроллинг и его применение в веб-дизайне

Заключение

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

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

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

Что вы думаете по поводу этого великолепного эффекта? Использовали ли когда-нибудь в собственных проектах? Не кажется ли вам, что процесс разработки параллакс-эффекта требует слишком много усилий?

Подборка примеров параллакс-скроллинга в веб-дизайне

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте Saucony Kinvara 3

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте Biamar

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте Whiteboard

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте Bomb Girls

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте Discover Bagigia

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте KRYSTALRAE

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте Anna Safroncik

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте Netlash

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте Activate

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте VW

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте Smart

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте Laurentius

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте Artofflight

Параллакс-скроллинг и его применение в веб-дизайне
Parallax-эффект на сайте Nike
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 25008   |   Оставлено комментариев: 5
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 18 мая 2012 @ 15:23
Написал: EatTheGuN — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Вроде такой широкий охват новостей и кода...а народ почти не коментит.
Ребята молодцы, спасибо за сайт и идеи! smile
Комментарий #2: 18 мая 2012 @ 15:33
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
EatTheGuN, просто народ занятой :) прочитали и сразу бегут воплощать :)
Комментарий #3: 18 мая 2012 @ 17:20
Написал: fortune — группа: Читатели  
На сайте с: 19.11.2009   |   Публикаций: 0   |   Комментариев: 59
ICQ: 190783170
просто реально занятой! :)) поработали, теперь можно насладиться чтением нового!


--------------------
я дизайнер - http://imdesigner.ru
Комментарий #4: 18 мая 2012 @ 17:26
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
fortune, все трудитесь, "ако пчела" wink
Хотя сказать по правде, у меня самого порой не до чтения, т.к. на стороне совсем другими делами занят ...
Комментарий #5: 21 января 2014 @ 20:32
Написал: joj — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Самый лучший сайт в примерах это http://community.saucony.com/kinvara3/
Очень очень круто.
Подскажите, а кто нибудь знает как они к сделали перелистывание постранично ?
И как сделать подлёт элемента Например падошва стоит, а кросовок подлетает ?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930