Главная > Web-дизайн > Параллакс-скроллинг: инструменты, руководства, статьи

Параллакс-скроллинг: инструменты, руководства, статьи


31 мая 2012, 13:00. Разместил: Design FactoRy
Наша предыдущая статья была посвящена эффекту параллакс-скроллинга и новым веб-сайтам с применением данного эффекта, так что вы уже должны быть знакомы с этим термином. Сегодня же мы хотим представить вашему вниманию некоторые ресурсы, которые помогут вам реализовать эффект параллакса. Сегодня мы собрали jQuery-плагины, статьи и информативные руководства. Если вы знакомы с какими-либо полезными источниками, касающимися данной темы, пожалуйста, не стесняйтесь, поделитесь с нами и другими читателями!

Параллакс-скроллинг: инструменты, руководства, статьи

jQuery-плагины

jQuery Parallax Image Slider

Параллакс-скроллинг: инструменты, руководства, статьи

Собственный jQuery-плагин для создания слайдеров изображений на основе параллакс-эффекта.

Демо | Скачать

Jquery Image Parallax

Параллакс-скроллинг: инструменты, руководства, статьи

Проект jQuery Image Parallax – это плагин, который создает иллюзию глубины изображения посредством прозрачности (PNG, GIF), повторения изображения и последующий анимации копий.

Скачать

jQuery-плагин Scrolling Parallax

Параллакс-скроллинг: инструменты, руководства, статьи

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

Демо | Скачать

Scrollorama

Параллакс-скроллинг: инструменты, руководства, статьи

jQuery-плагин для создания очень забавных эффектов.

Скачать

Scrolldeck

Параллакс-скроллинг: инструменты, руководства, статьи

jQuery-плагин для создания скользящих досок с контентом.

Демо | Скачать

jParallax

Параллакс-скроллинг: инструменты, руководства, статьи

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

Демо | Скачать

Stellar.js

Параллакс-скроллинг: инструменты, руководства, статьи

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

Демо | Скачать

jQuery Scroll Path

Параллакс-скроллинг: инструменты, руководства, статьи

jQuery-плагин для определения собственного пути, по которому браузер следует при прокрутке страницы.

Демо | Скачать

Curtain.js

Параллакс-скроллинг: инструменты, руководства, статьи

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

Скачать

Plax

Параллакс-скроллинг: инструменты, руководства, статьи

Plax – это jQuery/Ender-плагин, который позволяет невероятно просто создать параллакс-элементы, привязанных к положению указателя мыши. Вы можете видеть данный эффект на многих сайтах. Например, на страницах с ошибками 404 и 500, а также на странице «About» в GitHub.

Демо | Скачать

Статьи и руководства

Parallax Slider на jQuery

Параллакс-скроллинг: инструменты, руководства, статьи

Демо

Разработка платформы для размещения историй с параллакс-скроллингом

Параллакс-скроллинг: инструменты, руководства, статьи

Демо

Руководство параллакс на jQuery: Анимированный фон шапки сайта

Параллакс-скроллинг: инструменты, руководства, статьи

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

Демо

Создание забавного фона с параллакс-эффектом при помощи jQuery

Параллакс-скроллинг: инструменты, руководства, статьи

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

Демо

Создание интерфейса веб-сайта в стиле параллакс-скроллинга на jQuery и CSS

Параллакс-скроллинг: инструменты, руководства, статьи

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

Демо

Трехмерный параллакс-эффект

Параллакс-скроллинг: инструменты, руководства, статьи

Демо
Вернуться назад