15 лучших параллакс-плагинов для Wordpress

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

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

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

Плагин Parallax Scroll позволяет устанавливать эффект параллакса во время прокручивания фоновых изображений различных элементов страницы.

ML Scrolling Parallax – простой в использовании плагин для реализации эффекта параллакс-скроллинга.

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

Позволяет создать слайдер с эффектом параллакса. Этот плагин представляет собой многофункциональную консоль для настройки слайдера.

Плагин позволяет добавлять полноэкранный эффект параллакса на ваш Wordpress -сайт. Текстовое поле поддерживает HTML и шорткоды.

Плагин позволяет применить к созданным картинкам эффект параллакса. С его помощью можно загружать слои и настраивать анимацию. Первый шаг заключается в создании картинок при помощи любимого графического редактора ( Photoshop. GIMP и т. д.).

Все используемые слои должны быть одного размера и сохранены в формате PNG. так как важно сохранить прозрачность. После этого на странице редактирования записи в вашем Wordpress нужно нажать кнопку для вставки медиафайлов. После чего добавить слои, нажав Create Parallaxitem .

Super Simple jQuery Parallax Background позволяет применить эффект параллакса к фоновому изображению вашей темы оформления. Просто установите фоновое изображение в настройках вашей темы, а затем активируйте плагин. Все просто.

WP Parallax Content Slider – плагин, который автоматически отображает слайдер контента, состоящий из ваших последних записей. Переходы между слайдами реализованы с помощью CSS3 и jQuery .

Миниатюрный javascript -плагин, который позволяет применять едва заметный параллакс-эффект к элементам Wordpress-сайта. Плагин поддерживает множество браузеров, включая IE6+. Google Chrome. Mozilla Firefox. Safari. Opera и многие другие.

Parallax Gravity – WordPress -плагин, который позволяет создавать неограниченное количество посадочных страниц. С помощью Parallax Gravity можно создавать несколько разделов на одной странице, и каждому из них установить уникальный фон, а также добавлять любой тип контента (включая шорткоды из других плагинов ), и многое другое. Доступна платная версия плагина с расширенным функционалом.

One Page Builder - это плагин для создания одностраничных сайтов. С его помощью можно создавать неограниченное количество посадочных страниц с множеством функций.

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

Плагин позволяет добавлять на сайт галерею с эффектом параллакса. Здесь используются современные технологии, за счет которых управление плагином происходит интуитивно. В Gocha представлено более 87 миллионов конфигураций узоров.

Easy WP Parallax Slider – простой в использовании параллакс-слайдер на CSS3 и jQuery. Теперь у вас есть возможность создавать неограниченное количество параллакс-слайдеров с нужными вам настройками для каждого слайда. В плагине реализована поддержка шорткодов, так что вы сможете отображать созданные слайдеры в любом месте на сайте.

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

Перевод статьи “ 15 Best WordPress Parallax Plugins ” был подготовлен дружной командой проекта Сайтостроение от А до Я .

16 августа 2015 в 13:34

Создаем простой parallax – Zencoder

Небольшой обзор новой для меня темы - создание эффекта parallax на странице сайта. Вместе с вами буду учиться создавать такой эффект и начну с самого простого - Parallax.js.

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

Что такое parallax как эффект сам по себе, хорошо видно на самой страничке и расписывать его я не буду. В Интернет есть лучшее и более подробное описание эффекта parallax. Единственное, что можно сказать по поводу parallax - появился он в основном как необходимость, дань моде. Своим существованием практически полностью обязан популярным на сегодняшний день landing page и призван скрасить и разнообразить их относительную монотонность.

Способов реализации parallax на сегодня сушествует множество. Но практически все они основаны на одном принципе - изменении скорости прокрутки фонового изображения на странице относительно других объектов на ней (поправьте меня, если я неправ ).

Одним из преимуществ метода на основе скрипта Parallax.js является то, что в этом случае не требуется библиотеки jQuery. Скрипт может работать и с ней, но ее присутствие совсем необязательно. Получается выгода в весе страницы и скорости ее загрузки в браузере.

HTML-разметка для нашего будущего parallax удивительно простая - это маркированный список ul с идентификатором (имя его произвольное ) и элементами списка li (имя класса обязательно и неизменно ).

Еще одним обязательным атрибутом для элементов списка li является атрибут data-depth. у которого значение может меняться в диапазоне от 0 до 1. Чем выше значение в 1, тем выше скорость перемещения объекта на странице.

Внутрь элементов списка помещается изображение, которое будет анимироваться с помощью эффекта parallax .

Ниже приведен пример такой разметки:

Произведем небольшую стилизацию нашего будущего parallax с помощью Sass/Compass. Для элемента ul добавим фоновое изображение, чтобы был лучше виден эффект parallax.

Наш parallax почти готов - осталось “вдохнуть в него жизнь” с помощью Javascript.

Тут все просто. Первой строкой подключается файл скрипта Parallax.js. Второй строкой сначала в теле документа отыскивается элемент с идентификатором scene. который помещается внутрь переменной scene. Затем создается новый экземпляр parallax объекта Parallax и ему передается в качестве аргумента эта переменная scene .

Все - смотрим результат:

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

Мы получили эффект parallax.

Ниже приведен полный код HTML и CSS рассмотренного нами примера:

Полный исходный код примера можно посмотреть на GitHub - Parallax.js

Создаем сайт с эффектом Parallax, используя

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

Популярность эффекта parallax берет начало с сайта Nike’s Better World. который был представлен несколько лет тому назад. Эффект parallax применялся еще в 1980-х в интерфейсах игр: сначала в заголовках, а потом и в самих играх .

Взгляните на некоторые примеры, которые демонстрируют эффект parallax во всей красе.

Чтобы продемонстрировать, как работает эффект parallax, я решил показать вам простой 4-х слайдный веб-сайт, с использованием различных фонов и картинок. Я также добавил навигацию в верхний левый угол, которая будет пролистывать страницу к определенному слайду.
Вот как выглядит структура папки сайта:

Перво-наперво в файле index.html мы должны прописать HTML5 doctype и создать секцию. Она будет содержать CSS Reset и файл ‘styles.css’. Мы также добавим библиотеку jQuery вместе с кастомной библиотекой jQuery ‘js.js’. И наконец три плагина: ‘jquery.stellar.min.js’,'waypoints.min.js’ and ‘jquery.easing.1.3.js’.

Следующий элемент разметки будет логотип Envato, который будет в зафиксированном положении. Для него мы добавим класс ‘envatologo’, чтобы потом мы могли определить положение логотипа в CSS.

Слайды будут иметь четыре одинаковых разметки:

Мы используем класс ‘slide’, который будет задавать стиль для всех слайдов. Затем каждому слайду дается собственный порядковый id. Мы используем data attribute HTML5 и назовем его ‘data-slide’. Добавим еще один data attribute – ‘data-stellar-background-ratio’.

Все слайды, кроме последнего, будут иметь кнопку, которая позволит нам перейти в следующему слайду. Для этого мы добавим атрибут ‘data-slide’ с значением следующего слайда..

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

К счастью для нас, нам особо не нужно задерживаться на CSS. В основном мы назначим основные стили нескольким элементам.
Первое, что нам нужно сделать с CSS – это прикрепить шрифт BEBAS, используя @font-face. Затем мы долдны назначить ширину и высоту html и body на 100%.

//Тут должно быть @font-face. Баг хабра?

Главной навигационной панеле мы назначали позицию ‘fixed’, чтобы она «стояла» на одном месте. Мы подвинули ее на 20px вниз и назначили z-index на 1, чтобы убедиться, что эта панель будет поверх всего остального.

Логотипу envato мы назначили такие правила, чтобы он находился по центру экрана и поверх всего сайта.

Теперь перейдем непосредственно к самим слайдам. Назначим параметр background-attachment ‘fixed’. Мы использовали обои Philipp Seiffert. которые можно скачать здесь .

Класс .button нужен для кнопки внизу страницы, которая позволяет перейти к следующему слайду. Мы разместили снизу по центру каждого слайда и использовали картинку стрелки в качестве указателя.

Правила стиля для каждого слайда относительно просты и похожи друг на друга. Изображения второго слайда мы будем обозначать CSS селектором nth-child(n) .
Мы задаем правила для каждого изображения по мере их появления на экране.

Третий слайд имеет такую же структуру, что и второй.

Четвертый слайд отличается от двух предыдущих, так как не содержит никаких изображений, кроме фонового. Мы зададим параметр ‘background-size:cover’. Он позволит покрыть весь экран фоновым изображением.

jQuery – это то место, где оживают вещи. Я прокомментировал код, чтобы вы поняли что к чему.

Если вы посмотрите на второй слайд, то увидите объемные шарики. Я добавил к ним немного размытия по Гауссу, особенно к тем, что находятся немного дальше остальных. Это придает сайту «глубину».

PS Все замечания по поводу перевода, орфографии и т.п. с удовольствием приму в личку. Спасибо!

Как я перестал беспокоиться и полюбил параллакс

Если верить «Википедии», паралла?кс(греч. ????????, от ?????????, «смена, чередование») — это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.

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

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

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

А если очень хочется попробовать, но не понятно, с чего начать — разобраться с принципом действия можно, прочитав о нём вот тут. На тот случай, если лень писать самому, то можно воспользоваться готовыми плагинами, которые помогут вращать, замедлять, ускорять и превращать объекты на странице, — сейчас их пруд пруди.

Почему не работает параллакс в смартфоне?

ligisayan. для того, чтобы работал параллакс-эффект в любом его виде, нужно, чтобы постоянно поступали какие-то изменяющиеся данные, на основе которых можно было бы вычислять изменение положения элементов. Скрипт, который вы привели в пример, получает эти данные от датчиков положения устройства. Но со скроллом так не выйдет по описанным выше причинам.
Впрочем, выход, в какой-то степени, есть. Например, эта библиотека - https://github.com/Prinzhorn/skrollr - на мобильных устройствах вообще убирает скролл и заменяет его обработкой тач-евентов. Однако, дальнейшее развитие этой библиотеки прекращено, и я полностью согласен с её авторов в причинах этого: "To be honest, mobile support always sucked (because mobile browsers are hard) and you shouldn't compromise UX for some fancy UI effects. Ever."

Создаем сайт с эффектом параллакс-прокрутки при помощи

Как создать сайт » Javascript & Ajax » Javascript » Создаем сайт с эффектом параллакс-прокрутки при помощи Stellar.js

От автора: одним из самых заметных трендов современного веб-дизайна является применение эффектов параллакс-прокрутки (parallax scrolling). В этом учебнике я намереваюсь показать вам, как создать на вашем собственном сайте этот эффект, использовав немного воображения и помощь от Stellar.js.

Тема: Пользовательский интерфейс параллакс

Эффект параллакс-прокрутки стал популярен, когда несколько лет назад такие сайты, как Nike’s Better World. представили его на своих страницах. Параллакс-эффект относительно интерфейсов существует примерно с 1980-х гг. когда его впервые применили в названиях видеоигр и впоследствии в самих играх. Позже он стал появляться в веб-интерфейсах – вы ознакомитесь с silverbackapp. который применил этот эффект в качестве части заголовка.

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

Параллакс – это сдвиг или различие в видимой позиции объекта, рассматриваемого с двух различных линий зрения. – Wikipedia

Так что же в точности такое эффект параллакса? Ну, возможно, это одна из тех вещей, на которые ссылаются ваши клиенты, говоря «вслепую»: “Я хочу сайт в HTML5?. Когда клиенты просят сайт на “HTML5?, мне приходится отдельно спрашивать их, что они понимают под HTML5 – в этот момент он кажется просто модным словечком, которое клиенты повторяют, в сущности не понимая его значения.

Так что HTML5 ли это? Конечно, HTML5 играет свою роль в эффекте параллакс-прокрутки, но это не просто HTML5, в ней также используется некая форма javascript, такая как jQuery, и она невозможна без небольшого количества CSS3.

Изначально слово параллакс происходит от греческого параллаксис, что означает «изменение». У объектов, которые находятся ближе к глазу, имеется больший параллакс, чем у объектов, находящихся на расстоянии. Это значит, что более близкие нам объекты кажутся движущимися быстрее фоновых объектов.

Расслоение множественных фонов и объектов (таких как изображения), и затем их движение на разных скоростях создает ощущение глубины и объема.

Рассмотрите несколько примеров демонстрации параллакс-эффектов (изображения кликабельны ).

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

Wieden+Kennedy (W&K). ребята, стоящие за вебсайтом Nike Better World поддерживают эту мысль:

По нашему мнению, технологии независимы от концепции. Мы в основном фокусировались на создании отличного впечатления от интерактивного рассказа. – Wieden+Kennedy (W&K)

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

Вот такая у нас будет структура папок:

Чтобы добиться намеченного, я применяю Stellar.js, плагин jquery от Марка Дэлглиша (Mark Dalgleish), с помощью которого создавать сайты с параллакс-прокруткой легко и просто. В конце статьи я перечислил другие плагины, с помощью которых можно это сделать. Я предпочел использовать Stellar.js, потому что его довольно просто применять и, хотя это в учебнике не показано, можно оптимизировать для работы на платформах интеллектуальных устройств, таких как iOS.

Я также собираюсь применить jQuery waypoints Калеба Тротона (Caleb Troughton). Waypoints – это другой плагин jQuery, исполняющий функцию при прокрутке элемента. Он дает возможность навигации сайта определить в соответствии с положением полосы прокрутки, на каком слайде мы находимся.

jQuery easing – это плагин от GSGD, предлагающий передовые опции ослабления. Мы применим его, чтобы при переходах от слайда к слайду получить красивое, легкое перемещения.

Начав с index.html, добавляем HTML5 doctype, затем создаем раздел head. Он состоит из CSS Reset. за чем следует таблица стилей styles.css. Затем добавляем библиотеку jQuery, после которой идет наш пользовательский файл jQuery js.js. За ним, в свою очередь, следуют три плагина — jquery.stellar.min.js,waypoints.min.js и jquery.easing.1.3.js.

Следующий элемент нашего html – изображение логотипа Envato, находящийся в постоянном фиксированном положении на всем сайте. Добавляем для него класс envatologo, чтобы можно было позже при кодировании CSS установить его позиционирование.

У четырех слайдов одна разметка:

Мы применяем класс slide, который будет использоваться как общий стиль всех слайдов. Затем каждому слайду назначается id slide, за которым следует номер слайда, например, Slide1. Применяем атрибут данных HTML5 и называем его data-slide. Это позволит нам выделить его с помощью jQuery как целевой объект. Добавлен другой атрибут данных data-stellar-background-ratio. Он – специально для плагина jQuery stellar.js и говорит тому, в каком соотношении должна прокручиваться скорость элемента.

Соотношение корреспондирует обычной скорости прокрутки, поэтому соотношение в 0.5 заставит элемент прокручиваться на половинной скорости, при соотношении в 1 никакого эффекта не произойдет, а при соотношении в 2 элемент станет прокручиваться с удвоенной скоростью.

У всех слайдов, кроме четвертого, есть кнопка, которая позволит нам прокручивать к следующему слайду. Мы добавляем ей атрибут data-slide со значением номера следующего слайда. Так кнопке становится известно, какой слайд следующий, поэтому можно передать данное значение в jQuery. У большинства слайдов, кроме того, имеется интервал с классом slideno; просто большая текстовая версия номера слайда, который появляется в нижнем левом углу большей части слайдов. Его также можно использовать для названий.

Для третьего и четвертого слайдов мы еще добавляем несколько элементов-изображений в div slide. Эти изображения обеспечат настоящее понимание создаваемого нами эффекта параллакса. Мы оборачиваем их в div wrapper шириной 960px, который будет центрирован, чтобы гарантировать хорошее отображение в мониторах десктопов всех размеров.

К каждому изображению прикреплен атрибут data-stellar-ratio. Он, опять же, является специфичным для stellar.js и говорит плагину, в каком скоростном соотношении мы должны прокручивать элемент.

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

Первое, что нужно сделать в CSS – это ввести шрифт BEBAS с помощью @font-face. Затем добавляем его в html для определения шрифта сайта. Также устанавливаем ширину и высоту html и body на 100%. Так наши слайды смогут адаптироваться к полной ширине и высоте экрана пользователя.

Позиция основной навигации установлена на fixed, чтобы на протяжении всего сайта удерживать ее в одном месте. Мы делаем сверху офсет в 20px, чтобы над ней было немного свободного пространства и устанавливаем z-index на 1, чтобы обеспечить ее пребывание в верхнем слое сайта.

В действительности весь список – это просто стили текста с границей, проходящей внизу в качестве подчеркивания. Ее ширина 53px. Также добавлен переход, анимирующий стандартное состояние навигации в состояние наведения мыши. Я воспользовался здесь префиксом -webkit- просто для сокращения кода, а полный исходный код, который можно скачать выше, содержит все префиксы.

Состояние наведения мыши применяет те же свойства, что и класс active; по существу, только увеличение размера и ширины шрифта. Класс active применен jQuery для назначения стилей соответствующему слайду, видимому в окне браузера.

Логотипу envato назначены несколько позиционирующих стилей, просто для обеспечения его местоположения в центре экрана. Аналогично навигации, ему также назначен z-index в 1, чтобы он оставался сверху.

Теперь перейдем к стилям самих слайдов. Назначаем им свойство привязки к фону fixed. Свойство привязки к фону background-attachment определяет, зафиксировано ли фоновое изображение или прокручивается вместе с остальной страницей, так что оказывается пригодным для фоновых изображений (таких, как примененные на слайде четыре). Для этого примера мы использовали обои Филиппа Сайферта (Philipp Seiffert), которые можно скачать здесь. Устанавливаем позиционирование слайда на relative. Благодаря этому мы можем абсолютно расположить классы slideno и button перед слайдом в отличие от действующего документа.

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

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

Стили отдельного слайда сравнительно просты и каждый раз повторяют один шаблон. У первого слайда цвет фона #5c9900. У второго тоже есть установленный фоновый цвет. Также слайд два содержит изображения и каждое из них мы можем выбрать в качестве цели, применив селектор CSS nth-child(n). Этот селектор можно описать как:

Этот псевдокласс подбирает элементы на основании их расположения внутри списка дочерних элементов родительского элемента.

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

Слайд три следует тому же порядку, что и слайд два.

Четвертый слайд слегка отличатся от предыдущих двух, так как не содержит элементов-изображений и цвета фона, а вместо того применяет фоновое изображение. Также мы назначили ему свойство CSS3 background-size:cover. Оно в основном устанавливает фоновое изображение, чтобы то покрывало все окно браузера и меняет размер по мере изменения окна браузера. Также мы добавили строку текста в последнем слайде, которому назначили стили и класс parallaxbg.

На самом деле jQuery как раз оживляет весь дизайн. Я прокомментировал код, чтобы можно было видеть, что в точности происходит.

Если посмотреть на слайд два нашего примера, вы заметите пузыри в 3D. Я добавил к некоторым из них легкое Гауссово размытие, в основном к тем, которые на переднем плане, и к фоновым. Сочетание их с четко фокусированными пузырями добавляет ощущения глубины, создаваемого параллаксом. При попытке создания в своем сайте красивой глубины стоит обдумать этот момент.

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

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

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

Автор: Aaron Lumsden

Редакция: Команда webformyself.

Пройдите пошаговый видеокурс по JavaScript&jQuery

Parallax эффект фона на landing page

Всем привет. Сегодня расскажу вам о небольшом скрипте для создания простого parallax эффекта.

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

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

Итак, первым делом подключаем библиотеку jquery. Как обычно, между тегами head:

Теперь, нужно скачать подключить скрипт Simple Parallax Scrolling. Я рекомендую использовать сразу сжатую версию, так как дополнительных настроек внутри скрипта делать не понадобится:

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

Я создал шапку сайта (class="head") и добавил 2 обязательных атрибута:

Обратите внимание, что картинка не кладется в шапку при помощи тега img, а задается непосредственно в атрибутом в том контейнере, в котором хотим реализовать parallax.

На этом, в принципе, можно заканчивать, но еще пару слов:

• Если в dive, в котором хотим реализовать параллакс эффект нет других элементов, то необходимо задать ему высоту, иначе ничего не увидите.
• В случае использования не адаптивного дизайна, можно задать ширину и высоту изображения прямо в html при помощи атрибутов naturalWidth и naturalHeight.
• Можно двигать изображения при помощи атрибута data-position. Это аналог background-position в css.

С остальными опциями можете ознакомиться на официальной страничке проекта, которая указана выше.

На сегодня - все. Вот так просто можно реализовать простой вариант параллакс эффекта. Пока.

• Проверка landing page на уникальность и валидность
• 9. Полезные «Фишки» при составлении объявлений в Яндекс Директ
• Перемены в жизни | Мелкие правки на блоге.