Встроенные возможности трансформации Divi оказались чрезвычайно полезным инструментом дизайна, позволяющим с легкостью изменять размер, поворачивать, наклонять или размещать любой элемент на странице. И вы даже можете перевести элементы в состояния наведения, чтобы добиться впечатляющих эффектов наведения. Сегодня мы покажем вам, как развернуть эти анимации одним щелчком мыши.
Этот метод требует использования jQuery. Самое замечательное в этой технике то, что вы можете использовать встроенные настройки дизайна Divi для стилизации свойств преобразования, а затем включать (или отключать) эти свойства преобразования щелчком мыши. Это откроет массу уникальных возможностей для отображения скрытого контента путем перемещения элементов по щелчку, а не при наведении. И это также помогает уменьшить необходимость знать много CSS.
Давайте начнем.
Что нужно для начала
Для этого урока вам понадобится только Divi. Чтобы начать, перейдите в панель управления WordPress. Создайте новую страницу, дайте ей название и продолжайте разработку в конструкторе Divi на переднем плане. Выберите опцию «Создать с нуля». Теперь вы готовы к работе!
Основная идея объяснена
Прежде чем я углублюсь в подробности этого урока, я в нескольких словах расскажу, как работает эта техника.
Каждый раз, когда вы настраиваете элемент (раздел, строку или модуль) в Divi, вы добавляете собственный CSS к этому элементу в фоновом режиме. Например, используя встроенные настройки Divi, вы можете добавить свойство поворота преобразования к модулю рекламного объявления, чтобы он поворачивал модуль по оси Z на 20 градусов.
Но за кулисами вы создаете собственный CSS, который добавляется в этот текстовый модуль и выглядит так:
.et_pb_text_0 {transform: rotateZ (20deg); }
Достаточно просто. Допустим, вы хотели добавить ту же опцию преобразования при наведении курсора. Вам просто нужно применить свойство преобразования для состояния наведения в настройках Divi Builder.
И код будет выглядеть примерно так:
.et_pb_text_0: hover {transform: rotateZ (20deg); }
Однако, если вы хотите развернуть свойство преобразования по щелчку, все должно работать немного по-другому. Вам нужно будет ввести некоторый код javascript, чтобы вызвать событие щелчка на элементе (или текстовом модуле).
В нашем текущем примере наша основная цель состоит в том, чтобы включать и выключать свойство преобразования "transform: rotateZ (20deg)" при нажатии. Легкий способ сделать это - создать собственный класс CSS со свойством transformer: none! Важно »в настройках страницы (или внешней таблицы стилей). Это выглядело бы примерно так.
.toggle-transform-animation {transform: none! важный; }
С этим CSS на месте. Мы можем добавить CSS-класс «toggle-transform-animation» к элементу модуля blurb, у которого есть свойство transform.
Это отключит (переопределит) свойство преобразования и предотвратит его первоначальную активацию, даже если стиль свойства преобразования уже был добавлен к нему.
Теперь все, что вам нужно сделать, это активировать (добавить и удалить) этот пользовательский класс CSS, когда вы щелкаете элемент. Итак, каждый раз, когда мы щелкаем элемент, класс будет удален, а свойства преобразования (те, которые вы добавили с помощью Divi) будут развернуты.
Вот простой пример того, как это сделать. Сначала добавьте еще один класс CSS в модуль рекламного сообщения с именем «transform_target».
Далее перейдите в Divi > Параметры темы > Интеграция и добавьте следующий скрипт jQuery в заголовок вашего блога:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Вот и все ! Теперь каждый раз, когда вы нажимаете на модуль презентации, свойство преобразования, которое вы добавили в презентацию в Divi, будет включено или отключено.
Давайте теперь создадим пример, чтобы вы могли увидеть, как это может быть полезно для ваших собственных проектов.
Как поменять свойства трансформации на Click для отображения контента в Divi
Для этого примера мы будем придерживаться простого примера аннотации, использованного выше. Затем мы добавим дополнительную аннотацию за ней, так что всякий раз, когда вы нажимаете на верхнюю аннотацию, она будет убираться с дороги, чтобы показать дополнительный контент аннотации, находящийся за документом.
Создание модулей Blurb спереди и сзади
Затем добавьте модуль представления в столбец 1.
Обновите текстовое содержимое презентации, включив в него только заголовок (удалите основное содержимое по умолчанию), затем добавьте значок презентации.
Затем обновите параметры проекта следующим образом:
Цвет фона: #4c5866
Цвет значка: #ffffff
Ориентация текста: центр
Цвет текста
: Легкая пользовательская маржа: 0px внизу
Пользовательские отступы: 15% вверху, 15% внизу, 10% слева, 10% справа
Мы вернемся к этому модулю позже, но сейчас нам нужно создать наш второй модуль Blurb, который будет служить «возвратным» модулем с дополнительным контентом.
Для этого продублируйте созданный вами модуль презентации.
Затем во втором модуле удалите значок презентации (и изображение по умолчанию) и снова добавьте основной контент в модуль. Затем обновите параметры проекта следующим образом:
Цвет фона: rgba (76,88,102,0.3)
Цвет текста: черный
Пользовательские отступы: 20% top
Поместите модуль перед Сводкой
Теперь, когда у наших двух рекламных объявлений есть стили, нам нужно вернуться к нашему переднему (верхнему) рекламному объявлению и расположить его над задним (нижним) рекламным объявлением. Для этого мы дадим ему абсолютное положение с высотой 100% и шириной 100%.
Сначала откройте настройки модуля верхней / передней презентации и обновите следующее:
высота: 100%;
ширина: 100%;
Затем добавьте следующий пользовательский код CSS к основному элементу:
позиция: абсолютная! важная; переход: все .5s;
Затем обновите индекс z следующим образом:
Z индекс: 2000
Абсолютное положение в сочетании со 100% высотой и шириной и индексом z гарантирует, что модуль рекламного объявления остается над модулем рекламного сообщения позади него. Свойство перехода на самом деле является продолжительностью перехода параметров преобразования, которые мы развернем при следующем щелчке. А «курсор: указатель» предназначен для изменения курсора так, чтобы элемент казался интерактивным для пользователя.
Добавление параметров преобразования и пользовательских классов в переднюю панель
Пришло время добавить наши свойства преобразования к переднему объявлению. Затем мы добавим пользовательские классы CSS, необходимые для нашего jQuery, чтобы переключать эти свойства при нажатии.
Под параметрами дизайна передней аннотации добавьте следующие свойства преобразования:
Шкала преобразования X и Y: 20%
Источник преобразования: верхний центр
Помните, что дизайн преобразования, который вы видите в этот момент, будет запускаться при щелчке. Мы просто используем конструктор Divi, чтобы получить желаемый дизайн. В этом случае передняя реклама сжимается и становится центрированной вверху, как значок, на который можно щелкнуть.
Как только вы закончите, добавьте два CSS-класса, необходимых для нацеливания на переднюю панель с помощью jQuery, следующим образом:
Класс CSS: toggle-transform-animation transform_target
(обязательно разделяйте каждое имя класса пробелом)
Затем добавьте следующий пользовательский фрагмент кода CSS, который будет использоваться для включения и отключения свойств преобразования с помощью jQuery.
.toggle-transform-animation {преобразование: нет! важно; }
Вы заметите, что ранее добавленные свойства преобразования blurb были отключены, потому что этот класс был применен к нему.
Теперь перейдите в Divi> Параметры темы> Интеграция и добавьте следующий скрипт jQuery в заголовок блога:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Давайте посмотрим на конечный результат.
Вы можете использовать этот пример для создания еще более впечатляющих дизайнов. Не стесняйтесь делиться своим мнением в разделе комментариев.