Особенности подключаемого модуля Divi - Модуль Divi Tilt Blurb

Размытые изображения популярны в макетах Divi. Они отображают текст, изображения, значки и многое другое, что отлично подходит для демонстрации продуктов и услуг. Что, если вы хотите, чтобы они выделялись больше и обеспечивали интересную анимацию наведения? Обычную анимацию можно сделать с помощью CSS, но что, если вам нужно что-то другое? Плагин под названием Tilt Blurb Divi Module может быть тем, что вы ищете.

Что такое модуль Tilt Blurb?

Tilt Blurb Module - это сторонний плагин от Hadworm, который добавляет новый модуль рекламного сообщения в Divi Builder (как для Divi, так и для Extra), который добавляет интересные эффекты наклона, создавая трехмерный вид. В этом выделении плагина мы взглянем на модуль и посмотрим, что он может делать. Я показал несколько гифок, но большинство из них будут изображениями из-за размеров файлов gif. Изображения для примеров взяты с Unsplash.com и WordPress.org.

Установка модуля Tilt Blurb Divi

Загрузите и активируйте плагин как обычно. По ссылке на плагин в меню панели инструментов вы найдете новый пункт под названием Tile Blurb License. Щелкните здесь, введите лицензионный ключ и сохраните изменения. Это гарантирует, что вы будете получать обновления.

В Divi Builder добавлен новый модуль под названием Tilt Blurb. Он окрашен в фиолетовый цвет в Divi Builder, поэтому его трудно не заметить. Мне нравится, когда разработчики используют разные цвета для своих модулей, чтобы они выделялись среди стандартных модулей (чего бы это ни стоило).

В модуль включены стандартные вкладки плюс новая:

• Контент - текст, ссылка, изображение и значок, фон, ярлык администратора.
• Настройки наклона - настройки наклона, фон наклона, слои наклона
• Дизайн - изображение и значок, текст, текст заголовка, основной текст, граница, размер, интервал
• Дополнительно - CSS ID и классы, пользовательский CSS, анимация, видимость.

Настройки наклона

Для этих примеров я добавил фон, а затем поместил меньшее изображение в качестве переднего плана поверх него, чтобы создать 3D-эффекты. А потом приготовил кофе. Много кофе.

Пример с настройками по умолчанию

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

Размер с изображением

Это масштабирует рекламное объявление с использованием скрытого изображения и центрирует контент.

Наклоните размер размытия с двумя изображениями с плавающим содержимым

Это включает два изображения - одно для переднего плана и одно для фона. Изображение и текст переднего плана в 3D с использованием функции плавающего содержимого.

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

Величина наклона

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

Перспектива наклона

Наклон перспективы углубляет перспективу. Чем меньше число, тем глубже перспектива. По умолчанию - 1000. В этом примере - 200.

Шкала наклона

Шкала наклона - это уровень масштабирования. Значение по умолчанию - 1,1, что означает, что при наведении курсора изображение умножается на 1,1. В этом примере 2. Он переходит в 0, но уровень 0 создает непрерывное масштабирование вперед и назад, которое не работает для этого изображения. Могут потребоваться некоторые эксперименты, чтобы заставить его делать то, что вы хотите.

Скорость наклона

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

Наклон назад

Tilt Reverse изменяет направление наклона. Обычно угол наклона отклоняется от мыши. Обратно наклоняет изображение по направлению к мыши.

Наклонный блики

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

Граничный радиус

Радиус границы изменяет форму границы. По умолчанию - 40. Это максимальное значение - 100.

Фон наклона

Tilt Background позволяет вам установить цвет фона и эффекты границы.

Фон наклона

Одним из побочных эффектов Tilt Background Color является то, что он создает красивое свечение вокруг изображения.

Отрегулируйте цвет фона наклона, ширину границы, стиль границы фона, ширину границы, а также цвет границы и тени блока.

Наклонить фоновое расстояние

Tilt Background Distance регулирует расстояние до тени. По умолчанию установлено значение -50. В этом примере используется -25.

В этом примере используется расстояние наклона фона 0 и непрозрачность 0,3, что создает наложение на фон.

Наклонить размер фона / масштаб

Размер / масштаб наклона фона изменяет расстояние наклона фона. По умолчанию 1.04. Это 1.2.

Слои наклона

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

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

Как и ожидалось, нижняя часть изображения выглядит иначе. Это отличный способ добавить текстуру к границе. Меньшая глубина слоя сделает границу тоньше.

Здесь используется глубина слоя 10.

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

Вот 3D-логотип WordPress, который выглядит заключенным в кристалл. Я загрузил логотип в область изображения «Изображение и значок», установил величину наклона на 100, использовал блики наклона по умолчанию, добавил логотип к изображению слоя в разделе «Слои наклона», установил глубину слоя 50 и установил цвет слоя на белый и почти полностью прозрачный.

Вот логотип без цвета слоя. Боковые стороны увидеть труднее.

Лицензия, поддержка и документация

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

Последние мысли

Модуль Tilt Blurb предоставляет множество интересных эффектов наклона, которые создают красивый трехмерный вид изображениям, значкам и тексту. Это отличный способ создавать призывы к действию, 3D-обложки книг и изображения продуктов. Модуль Tilt Blurb является инновационным и интуитивно понятным. Если вы хотите добавить приятные эффекты наклона к своим размытым изображениям, стоит взглянуть на модуль Tilt Blurb Module.

Ждем вашего ответа. Вы пробовали модуль Tilt Blurb Divi? Дайте нам знать, что вы думаете об этом, в комментариях ниже.

Лучшее изображение через hobbit / shutterstock.com