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

Подписка

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, внешне выглядит изящно — но вот увеличилось время загрузки сайта, к сожалению, пришлось отказаться.

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

Добавить новый комментарий

* — поля обязательные для заполнения XHTML: Вы также можете использовать эти тэги: <a href="" title=""> <pre lang=""> <blockquote> Перейти наверх

Поиск

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

Комментарии

  • Fotografas: Отличная фотография.
  • Тимофей: Хрень полная. А если у меня данных, ну штук 50-70, в...
  • Irmaseo: Время решает все.
  • Дмитрий: Есть еще один вариант – заказать у друга-дизайнер...
  • Sindor: Полезная статья, спасибо автору!
  • Ganesa: Клипарты очень и очень выручают, даже те сервисы, которые с...
  • Елена Калинина: Атомарный дизайн пригодится очень при...
  • Елена Калинина: Логотип того или иного города легко найти в...

Друзья

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

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

Система Orphus