Parallax wordpress themes & plugins: 35+ options for parallax scrolling

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

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

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

Что такое параллакс эффект на сайте

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

Как сделать параллакс эффект на сайте

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<script src="js/parallax.min.js"></script>

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

<header data-parallax="scroll" data-image-src="images/bg.png">
 <h2>Smartlanding</h2>
 <h3>Создание landing page</h3>
</header>

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

data-parallax="scroll"

data-image-src="путь к картинке/bg.png"

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

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

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

Можно двигать изображения при помощи атрибута data-position. Это аналог background-position в css.

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

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

Скачать исходник

Социальные сети, шаринг, рассылки, RSS

Sociable

Sociable — один из самых популярных плагинов WordPress для шаринга социальных сетей. Поддерживает все популярные социальные сети, бесплатен и прост в установке. Красивые современные иконки соцсетей. Рейтинги.

Скачать плагин: http://wordpress.org/extend/plugins/sociable/

AddThis

AddThis– многофункциональный плагин социальных закладок для WordPress сайтов. Пожалуй, самый большой по количеству поддерживаемых сервисов: 350+. Кроме популярных Facebook, Twitter, Digg, StumbleUpon, LiveJournal, есть много русскоязычных сервисов: ВКонтакте, Одноклассники, БобрДобр, memori.ru, МоёМесто, Мой круг, 100zakladok и пр. Плагин имеет множество настроек, хорошую документацию, особенно через сайт плагина можно отключать и включать нужные сервисы. Есть API для разработчиков. Учет социального трафика.

Скачать плагин: http://wordpress.org/extend/plugins/addthis/

Shareaholic

Shareaholic — очень популярный и функциональный плагин для WordPress, который обеспечивает шаринг во многие социальные сети. Гибкие настройки. Есть блок рекомендаций, статистика, аналитика. Локализация на более 15 языках.

Скачать плагин: http://wordpress.org/extend/plugins/sexybookmarks/

WP Socializer

WP Socializer — красивый и полезный плагин WordPress для шаринга в социальные сети (на данный момент 107 соцсетей). Можно настроить отображение плавающего блока, виджета, шорткода и пр.

Скачать плагин: http://wordpress.org/extend/plugins/wp-socializer/

NextScripts: Social Networks Auto-Poster

NextScripts: Social Networks Auto-Poster — отличный плагин для WordPress, которые реализует автоматический кросс-постинг в разные социальные сети и ресурсы: , , vKontakte(VK.com), LiveJournal, LinkedIn, , , на сайты WordPress, Blogger и др.

Скачать плагин: http://wordpress.org/extend/plugins/social-networks-auto-poster-facebook-twitter-g/

VKontakte Cross-Post

VKontakte Cross-Post – плагин для WordPress, позволяющий публиковать информацию о новых записях вашего блога на стенах группы или официальной страницы ВКонтакте прямо со страницы публикации статьи. В основе кросспостинга лежит ВКонтакте API, по средствам которого и производится авторизация и публикация записей на стене вашей группы.

Скачать плагин: http://wordpress.org/extend/plugins/vkontakte-cross-post/

Mashable Like ShareButton

Mashable Like ShareButton — плагин WordPress, который позволяет оформлять блок связи с разными социальными сетями как на популярном сайте Mashable. Красиво и информативно. Правда, в новой версии сайта этого блока уже нет.

Скачать плагин: http://wordpress.org/extend/plugins/wp-mashsocial-wigdet/

Wysija Newsletters

Wysija Newsletters — многофункциональный, мощный плагин WordPress, который отвечает за создание рассылки новостей на вашем сайте. Много настроек, очень удобный WYSIWYG-редактор, в бесплатной версии поддерживает до 2000 подписчиков, импорт подписчиков из MailChimp, Aweber и пр, до 30 тем оформления.

Скачать плагин: http://wordpress.org/extend/plugins/wysija-newsletters/

Newsletter Sign-Up

Newsletter Sign-Up — многофункциональный и популярный плагин WordPress, позволяющий создавать новостные рассылки со сторонними сервисами новостных рассылок, таких как MailChimp, YMLP, Aweber, iContact, PHPList, Feedblitz. По сути, если правильно прописать настройки, то можно воспользоваться практически любым сервисом подобных рассылок.

Скачать плагин: http://wordpress.org/extend/plugins/newsletter-sign-up/

Feedburner Form

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

Скачать плагин: http://wordpress.org/extend/plugins/feedburner-form/

FeedWordPress

FeedWordPress — полезный плагин Atom/RSS для WordPress, собирает и генерирует ленты из указанных вами RSS-каналов.

Скачать плагин: http://wordpress.org/extend/plugins/feedwordpress/

Slider Revolution

Slider Revolution — очень популярный плагин для слайдеров WordPress с почти полмиллионом продаж. Это многофункциональный плагин, который создает несколько исключительных слайдов, но требует от дизайна отличного чутья, чтобы извлечь из него максимум пользы.

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

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

Особенности Slider Revolution:

Более 200 готовых шаблонов, которые вы можете использовать
Переработанный интерфейс легче освоить
Дополнительные дополнения для еще большего расширения слайдов
Тысячи элементов на выбор
Множество доступных анимаций и эффектов

Плюсы Slider Revolution:

Очень хорошо продуманный визуальный редактор
Более 200 шаблонов и более 2000 элементов на выбор
Работает с несколькими типами мультимедиа, включая видео и сообщения в блогах
Буквально сотни вариантов сделать слайды уникальными

Минусы Slider Revolution:

Нет бесплатной версии
Этот визуальный редактор не самый удобный

Как создать эффект параллакса с помощью кода

Вы можете подумать, что создание этого эффекта на помощь по коду сложно, но это не так

Обратите особое внимание на эту простую процедуру, которую можно выполнить с классический редактор WordPress

Первое, что нужно сделать, это удалить шорткод, который вы только что разместили при редактировании домашней страницы. Кроме того, вы должны отключите параллакс, который вы установили в меню Плагины.
Откройте страницу или сообщение, к которому вы хотите добавить эффект параллакса.
В поле содержимого найдите вкладку языка «HTML».
Найдите сайт, на котором вы хотите разместить свой Parallax. Вы разместите там следующие элементы:

Название Parallax

Как видите, вам нужно присвоить вашему Parallax имя и его «h1». Затем нажмите «Обновить».
Затем для настройки всех необходимых нам функций добавлять дополнительные элементы CCS . Там мы можем добавить изображение, используя его URL-адрес, а также настроить его размер и положение.
Таким же образом мы можем настроить буквы параллакса, размер, цвет и положение. Мы сделаем все это, скопировав в поле кода следующее:

.мипараллакс {

фоновое изображение: URL (http: //….jpg);

ширина: 100%;

высота: 300%;

скрытый перелив;

background-attachment: исправлено;

нижний размер: 100%;

}

.мипараллакс h1 {

цвет: #fff;

выравнивание текста; центр;

верхнее поле: 130 пикселей;

}

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

Video Gallery – Vimeo and YouTube Gallery

Первым в моем списке плагин «Video Gallery — Vimeo и YouTube Gallery» позволяет вставлять видео с обеих платформ на свой веб-сайт, просто копируя и вставляя их URL-адреса.

С помощью этого решения вы можете создать несколько галерей и добавить столько видео, сколько захотите, в любую из них:

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

Плагин генерирует уникальный шорткод для каждой галереи, который вы можете разместить где угодно на своем веб-сайте.

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

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

Ключевые особенности:

Создавайте видеогалереи, используя видео с YouTube и Vimeo,
Установите собственные названия и описания для встраиваемых видео,
Создайте уникальный шорткод для каждой видеогалереи,
Выберите один из семи стилей для ваших видеогалерей.

«Video Gallery — Vimeo и YouTube Gallery» для вас, если…

… Вы используете Vimeo или YouTube для размещения видео, которые хотите отобразить на своем веб-сайте.

Этот плагин прост в использовании, и вы можете разместить галерею на своем сайте за считанные минуты, скопировав и вставив несколько URL-адресов.

Цена: бесплатно, с премиальными лицензиями от 19,99 долларов США.

Aeris — Creative Parallax WordPress Theme

Креативная параллакс-тема для WordPress, построенная на базе фреймворка Foundation 5, может работать в одностраничном и мультистраничном режимах. Отлично подойдет для создания на своей базе лендингов, публикации портфолио дизайн-студий, агентств, фотографов и т.д. Aeris имеет отзывчивый дизайн, поддержку Retina-дисплеев и выглядит одинаково круто на любых устройствах, с любым размером экрана. Поддерживается несколько типов шапок, имеются неограниченные возможности кастомизации цветовой схемы, визуальный конструктор страниц, динамические портфолио, лайтбоксы, работающая Twitter-лента, шрифтовые иконки, анимация CSS3, валидный HTML5-код и многое другое.

Image Hover Effects

Перейти

Поступивший в продажу 26 июня 2020 года плагин анимации, который вы можете проверить в действии одним из первых

Однако, обратите внимание: для его использования нужно, чтобы к вашему сайту на WordPress был подключен редактор Elementor. Без него дополнение не работает

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

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

Цена дополнения для ВордПресс Image Hover Effects — $24. В нее входят 6 месяцев поддержки, в течение которых можно будет бесплатно обратиться за помощью к специалисту.

WP Animated Buttons

Перейти

Еще один плагин ВордПресс, для использования которого нужен конструктор WPBakery Page Builder. Поступил в магазин 20 апреля 2020 года. Его назначение — установка на ваш сайт анимированных кнопок, гибко настраиваемых в соответствии с особенностями проекта. Дополнение простое в использовании, имеет понятные текстовые инструкции, осваивается за считанные минуты.

Особенности WP Animated Buttons для ВордПресс:

20 разновидностей кнопок с анимациями;
22 вида фоновых анимаций;
3 размера кнопки;
неограниченные возможности по настройке цвета кнопок;
множество сочетаний цвета+анимаций+размера кнопки+фона позволяют реализовать любую задумку, подобрав оптимальный вариант для конкретного сайта и раздела.

WP Animated Buttons стоит $14. Как и у других премиальных плагинов, у него есть 6 месяцев поддержки от разработчика, поставляющихся в комплекте.

Знакомство с Parallax Scrolling / Habr

Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.

Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.

Наверное, вы заметили, что во время прокрутки страницы сайта вниз несколько различных элементов, находящихся на этой странице, двигаются с разной скоростью. Давайте для примера возьмем страницу, отображенную на картинке сверху. По мере прокрутки страницы вниз вы увидите, что голубые точки в фоне (те, которые немного размыты), двигаются с той же скоростью, что и скроллбар. Также, вы увидите, что группа голубых точек, которые более сфокусированы и лежат на переднем плане, двигаются с немного большей скоростью, чем скроллбар. Быстрее этих точек двигается текст “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” и главный заголовок страницы “Products”. И, наконец, есть изображения самого продукта, как маленькие и расфокусированные в фоне, так и большие, сфокусированные и лежащие на переднем плане. Фоновые изображения продуктов двигаются с той же скоростью, что и текст, в то время как изображения продуктов на переднем плане двигаются быстрее этого текста. Это все и является идеальной демонстрацией параллакс-скроллинга, когда разные слои изображений накладываются друг на друга и все движутся с разной скоростью при прокрутке страницы, создавая эффект трехмерности.

Параллакс-скроллинг не ограничивается только вертикальным скроллом страницы или скроллингом по прямой линии. Отдадим право Nintendo для демонстрации идеального примера, подтверждающего это утверждение. Вспомните ранние игры Nintendo, где наши герои обычно двигались горизонтально слева направо вдоль экрана, а не вертикально вниз, как мы видели это на сайте Activate выше. Прокатитесь на MarkioKart Wii и давайте поговорим о некоторых клевых штуках, которые мы там можно увидеть.

Первую вещь, которую вы заметите, это направление скроллинга страницы — оно не вертикальное, а как сказано выше, а изначально горизонтальное. Конечно, это круто, но это также не новый концепт. Также, вы заметите параллакс-эффект с динозавром Йоши и панцирями на фоне, Марио и Луиджи на переднем плане и основным контентом, которые смещаются с разной скоростью при прокрутке. Но как только вы доедете до страниц #highlights и #attack, траектория смещения перестанет быть идеально горизонтальной. То же самое касается перехода между страницами #rediscover и #snes. Изображения не только сохраняют свою разную скорость смещения, но и меняют общее направление с горизонтального на вертикальное.

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

Параллакс-скроллинг также может помочь оживить сайт, на котором не особо много контента. Что если весь ваш сайт состоит из mission statement, или раздела about us, плюс контактная информация? Скорее всего, вы бы могли сделать это одной страницей и при определенных условиях у вас бы получился неплохой одностраничный сайт, но запомнится ли он посетителям? Скорее всего, нет. Но что если добавить к нему немного параллакса, как это сделал народ на Spring / Summer ?

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

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

5 советов, которые следует учитывать при разработке Parallax веб-сайта

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

1. Параллакс-эффекты помогут вам рассказать непрерывную историю

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

2. Используйте только изображения высокого качества

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

3. Меньше больше

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

4. Не игнорируйте свои призывы к действию

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

5. Держите своих героев в уме

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

Slider by 10Web

Slider by 10Web — это отполированный продукт. Он имеет привлекательную панель инструментов в пользовательском интерфейсе WordPress, простые элементы управления и быстро справляется с процессом создания слайдов. Вы можете упростить работу с изображениями и заголовком или усилить его с помощью нескольких слоев, анимации, видео и интерактивности.

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

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

Особенности Slider от 10Web: