Как создать наложение изображения с помощью дизайнов анимации затвора с разделенным текстом в Divi

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

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

Давайте приступим и приступим!

Sneak Peek

Вот краткий обзор дизайна наложения изображений из этого урока.

А вот код, демонстрирующий тот же дизайн, что и в этом руководстве.

Скачайте макет БЕСПЛАТНО

Чтобы получить в свое распоряжение дизайн анимации затвора с разделенным текстом, накладываемый на изображение, из этого руководства, вам сначала необходимо загрузить их, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Часть 1. Создание наложения изображения с помощью шторок с разделенным текстом

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

Ряд

Для начала добавьте к обычному разделу строку из двух столбцов.

Перед добавлением модулей откройте настройки ряда и обновите ширину желоба:

• Ширина желоба: 2

Обновление столбца

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

Чтобы обозначить наш столбец как «столбец с заслонкой» и анимировать его позже «при наведении курсора», добавьте в столбец следующие классы CSS:

• Класс CSS: шторка-столбец при наведении курсора

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

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Добавление основного изображения

Внутри столбца 1 добавьте модуль изображения. Это будет основным изображением, которое мы разместим за накладкой ставня.

Загрузите изображение в модуль изображений.

Затем установите выравнивание изображения по центру.

Создание верхней заслонки с разделенным текстом

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

Обновите содержимое текстового модуля, добавив текст «divi» в область тела.

На вкладке «Дизайн» обновите стиль текста следующим образом:

• Шрифт текста: Поппинс
• Толщина шрифта текста: толстый
• Стиль шрифта текста: TT
• Цвет текста текста: #ffffff
• Размер текста: 200 пикселей (компьютер), 30 пикселей (планшет и телефон)
• Расстояние между буквами в тексте: -0,03em
• Высота текстовой строки: 0em
• Выравнивание текста: по центру

Затем обновите параметры размера и интервала:

• Ширина: 100%
• Высота: 50%
• Поля: низ 0 пикселей

На вкладке «Дополнительно» обновите следующее:

• Класс CSS: верхняя заслонка

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

Затем добавьте этот настраиваемый CSS в основной элемент:

display:flex;
align-items:flex-end;
justify-content:center;

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

Чтобы разместить нашу верхнюю шторку, нам нужно сначала скрыть переполнение текста, а затем задать ему абсолютное положение следующим образом:

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый
• Позиция: Абсолютная

Это переместит шторку на верхнюю половину изображения.

Создание нижней шторки с соответствующим разделенным текстом

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

Затем откройте дублированный текстовый модуль и обновите следующее:

• Класс CSS: верхняя заслонка

Обновите CSS основного элемента, заменив «flex-end» на «flex-start» для свойства align-items. Вот окончательный CSS:

display:flex;
align-items:flex-start;
justify-content:center;

При использовании «flex-start» текст выравнивается по вертикали в верхней части модуля. А поскольку высота строки текста равна 0, текст будет отображаться как разделенный, показывая только нижнюю половину.

Затем обновите абсолютное положение с помощью вертикального смещения следующим образом:

• Вертикальное смещение: 50%

В результате текстовый модуль шторки окажется над нижней половиной изображения.

Разделенный текст на обеих створках теперь должен быть идеально выровнен.

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

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

Часть 2: Кодекс

Чтобы добавить функциональность анимации затвора, нам понадобится несколько фрагментов CSS и JS с использованием модуля кода.

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

CSS

Вставьте следующий CSS в поле кода, убедившись, что он обернут необходимыми тегами стиля :

  /* transition duration of shutter animation */
  .top-shutter,
  .bottom-shutter {
    transition: transform 1s;
  }
  /* disables all transform options created in
  Divi Builder for both shutters */
  .divi-transform-none .top-shutter,
  .divi-transform-none .bottom-shutter {
    transform: none;
  }
  .on-click {
    cursor:pointer;
  }

Этот CSS действительно прост. Все, что он делает, это применяет transform: none к ставням внутри столбца с классом «divi-transform-none». Этот класс будет включаться и выключаться с помощью JS для создания анимации. Переход: преобразование 1 просто устанавливает длительность перехода (или анимации) равной 1 секунде.

JS

После CSS добавьте следующий JQuery в поле кода, обернув его необходимыми тегами сценария :

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

Первая часть кода добавляет функциональность, которая переключает анимацию преобразования шторки при наведении курсора всякий раз, когда столбец имеет классы «shutter-column on-hover divi-transform-none».

    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

Вторая часть кода добавляет функциональность, которая переключает анимацию преобразования шторки при нажатии всякий раз, когда столбец имеет классы «shutter-column on-click divi-transform-none».

    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });

Часть 3: Дизайн анимации затвора с разделенным текстом

Дизайн # 1

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

Добавить свойства трансформации к верхней заслонке

Обычно, когда вы используете CSS для анимации чего-либо со свойствами преобразования, элемент изначально не имеет стиля преобразования, а затем стиль преобразования применяется всякий раз, когда пользователь наводит курсор на элемент или щелкает по нему. В Divi мы собираемся перевернуть процесс и начать с добавления стиля преобразования к элементу, используя сначала Divi Builder. Это позволяет нам использовать встроенные параметры преобразования при визуальном редактировании дизайна. Затем, когда мы закончим добавление всех элементов дизайна преобразования, мы можем сначала отключить их (используя класс CSS), а затем включать и выключать его, когда пользователь взаимодействует с наложением.

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

• Масштаб преобразования (X и Y): 150%
• Преобразовать преобразовать ось Y: -101%
• Преобразовать исходную точку: центр вверху

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

Добавить свойства преобразования к нижней шторке

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

• Масштаб преобразования (X и Y): 150%
• Преобразовать преобразовать ось Y: 101%
• Преобразовать начало координат: внизу в центре

Добавить класс для первоначального отключения конструкций преобразования

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

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

Добавьте функциональность по щелчку с помощью одного класса

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

Во-первых, продублируйте столбец 1 с нашим первым рабочим примером при наведении курсора. Затем удалите пустой столбец. Теперь у вас должно быть два одинаковых столбца с одинаковыми классами и содержимым.

Откройте настройки для столбца 2 и замените класс «при наведении» на класс «при щелчке». Вот какими должны быть последние три класса:

• Класс CSS: нажатие кнопки затвора-столбца divi-transform-none

Результат

Реверс анимации затвора при наведении курсора

Если вы хотите, чтобы основное изображение сначала отображалось непокрытым, а затем добавляло наложение при наведении курсора на изображение (обратное тому, как это работает сейчас), вы можете удалить класс «divi-transform-none» в столбце, используемом для шторки. . Это даст вам следующий эффект.

Дизайн # 2

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

Обновить ставни

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

• Справочная информация: #ffffff
• Цвет текста текста: # 000000
• Режим наложения: Экран

Результат

Дизайн # 3

Чтобы создать дизайн наложения изображения анимации третьего затвора, продублируйте предыдущий раздел.

Добавить новое изображение

Затем обновите модуль изображения новым изображением.

Обновить ставни

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

• Содержание тела: d

• Фон: rgba (0,0,0,0.9)
• Цвет текста текста: #ffffff
• Размер текста: 450 пикселей (компьютер), 70 пикселей (планшет и телефон)
• Режим наложения: Умножение

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

• Масштаб преобразования (X и Y): 100% (по умолчанию)
• Преобразовать преобразовать ось Y: -101%
• Преобразование, поворот оси Z: -45 градусов
• Источник трансформации: вверху слева

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

• Масштаб преобразования (X и Y): 100% (по умолчанию)
• Преобразовать преобразовать ось Y: 101%
• Преобразование, поворот оси Z: -45 градусов
• Источник трансформации: внизу справа

Результат

Дополнительные примеры и возможности

Вот еще пара примеров дизайна, использующих те же методы.

Вот тот, который похож на дизайн №2, но без шкалы трансформации на ставнях. Он также показывает, как эффект лайтбокса по-прежнему работает на изображении.

А вот еще один пример, в котором используется преобразование translate для горизонтального сдвига жалюзи.

Окончательные результаты

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

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!