Эффект параллакса wordpress

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

parallax Приветствуем вас! В то время как некоторые менее популярные тенденции «веб-дизайна» приходят и уходят, эффект параллакса всегда в стиле. Фактически, прокрутка параллакса — одно из самых важных направлений дизайна в 2017 году.

После того, как в 2011 году она была впервые пропагандирована корпорацией «Nike», то ряд веб-сайтов приняли эту технику, чтобы создать более потрясающий и визуально привлекательный вид.

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

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

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

Несколько примечаний о прокрутке параллакса

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

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

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

Что такое Parallax?

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

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

Это делает его похожим на то, что текст и изображения плавают поверх фона, добавляя элемент интерактивности, которого нет на стандартном сайте «текст на плоском фоне». Параллакс можно рассматривать как трюк. Как сделать параллакс эффект на сайте? Вот этим мы сейчас и займемся.

Создаем эффект параллакса

Способ 1 Добавляем эффект паралакс с помощью плагина

Этот простой способ рекомендуется для большинства пользователей. Для начала скачиваем плагин «Advanced WordPress Backgrounds» (https://wordpress.org/plugins/advanced-backgrounds/). Затем устанавливаем и активируем плагин. Установить и активировать плагин вы сможете и без нашего участия.

После вышеперечисленных шагов вам необходимо отредактировать страницу, где вы собираетесь добавить эффект параллакса. У вас появиться новая кнопка «Дополнительно WordPress Backgrounds», которая находится в визуальном редакторе.

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

Далее нажимаем на кнопку «Select Image», выбираем и загружаем рисунок, который вы хотите использовать. Вам понадобиться рисунок большого размера, иначе он будет отображаться в пикселях. После включаем Parallax, выбрав тип параллакса.

Вам доступны ряд стилей, с которыми вы можете проводить эксперименты. Часто используемый эффект параллакса — это прокрутка. Нажимаем кнопку «Insert», чтобы продолжить. Теперь плагин добавит короткий код в редактор сообщений WordPress. Примерно он выглядит вот таким образом:

[nk_awb awb_type=”image” awb_image=”22″ awb_parallax=”scroll” awb_image_size=”full” awb_stretch=”true” awb_parallax_speed=”0.4″ awb_mouse_parallax_speed=”15000″ awb_mouse_parallax_size=”35″ awb_mouse_parallax=”true”]
Здесь ваш контент
[/nk_awb]

Замените «Ваш контент здесь» своим контентом, а затем сохраняем страницу. Теперь вы можете посмотреть на свое творение в действии.

Способ 2. Параллакс эффект для сайта с помощью CSS

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

Это можно сделать следующим образом. Идем в библиотеку «Медиафайлы» — Добавить новый. После загрузки картинки вам нужно скопировать и отредактировать ее адрес в библиотеке «Медиафайлы».

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

<div class="parallax">
<div class="parallax-content">Ваш контент здесь...</div>
</div>

Следующий шаг, это добавление следующего пользовательского CSS в тему WordPress

.parallax {
background-image: url («https://kopslav.ru/wp-content/uploads/2017/08/my-background-image.jpg»);
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
.parallax-content {
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px;
}

Не забываем заменить адрес фонового изображения адресом своего фонового рисунка. Сохраняем изменения свои изменения и бежим смотреть свое творение в действии.