Лучшие статьи категории «Ресурсы»

Подписка

Parallax эффект. jQuery скрипты и плагины

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

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

jQuery библиотеки

Чтобы помочь вам в создании сайта с таким эффектом мы собрали несколько плагинов, которые помогут вам в этом. Всего таких плагинов получилось 6. К каждому из них есть демо и документация (GitHub), в которой рассказано, как его «включить» и настроить. Дальнейшие усовершенствования зависят только от вашего воображения и поставленных задач.

Плагины перечислены по порядку, от более функциональных к менее.

В заключении нельзя не упомянуть об одном полезном инструменте — Parallax Builder. С его можно создавать паралакс эффект с помощью графического интерфейса системы. На наш взгляд, очень многообещающий сервис.



Комментарии (6)

Дмитрий / 7 Декабрь 2012 в 21:13

Интересно, на каких еще крупных корпоративных сайтах мирового уровня (кроме Nike) используется эффект параллакса? Не рискованно ли это в плане возможного отпугивания консервативных пользователей?

Илья Федотов / 8 Декабрь 2012 в 10:22

Дмитрий, компаний, которые используют Parallax довольно много. Кроме Nike, это Google, Range Rover, RBE, различные веб-студии (OK Studios), креативные агенства (Broadcast, Impero) и т.д.

Seostager / 8 Декабрь 2012 в 23:30

Не знал, что это так называется. Спасибо за наводку, появились идеи для домашней страницы (:

Fontan / 13 Декабрь 2012 в 16:45

От это полезная статья! Спасибо, пойду себе на сайт запаралаксю (:

Рем / 29 Апрель 2014 в 12:32

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

Владислав / 29 Июль 2014 в 16:32

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

С такими вещами вообще поосторожней нужно быть. Они и сайт могут тормозить и систему в целом.

Комментирование этой статьи закрыто ...

Поиск

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

Комментарии

  • Павел Тимощенко: Аналогично скриню картинки для некоторых...
  • Зенков Андрей: Учитывая, что иконки служат для подсказки тем,...
  • Зенков Андрей: Дизайнер должен ответственно подойти к...
  • Оля: DizGraf, вот отличный русскоязычный бесплатный фотобанк.
  • V.V: В копилку еще один типограф Дениса Селезнёва на JavaScript.
  • Сергей: Спасибо за примеры инфографики. Для тех, кому нужны еще...
  • Андрей Зенков: Спасибо автору. Хорошая подборка. Аж стыдно за то,...
  • Адениум: Наука даром не дается — наука трудом берется....

Друзья

Нашли ошибку?

Если вы нашли грамматическую ошибку на сайте, выделите ее и нажмите сочетание клавиш Ctrl+Enter.

Система Orphus