Изображение наложения является очень творческой среде, чтобы обеспечить привлекательный опыт просмотра веб-сайта посетителей. Пользовательские анимации и парящие эффекты являются отличным способом, чтобы продемонстрировать изображение, и это очень популярно у всех в эти дни. В сегодняшнем учебнике, мы увидим, как создать красивые наложения изображения с разделенным текстом анимации через Диви.
Мы разделили сегодняшний учебник на три части. В первой части мы увидим, как создать пользовательский наложение изображения, а в следующей части мы добавим код в дизайн. И, наконец, мы увидим, как создать уникальный дизайн наложения изображений с использованием встроенного варианта Диви.
Давайте начнем без промедления.
Предварительный просмотр
Прежде чем мы начнем сегодняшнее руководство, посмотрите на наш дизайн, который мы собираемся узнать сегодня.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчасПрежде чем мы начнем
Диви является большой темой WordPress, которая обеспечивает впечатляющие возможности и служит истинной цели многоцелевой темы WordPress. Его простой в использовании строитель страниц имеет много функциональных возможностей, которые могут создавать удивительные проекты. Получить тему и активировать его после установки.
Создайте новую страницу с приборной панели WordPress и откройте страницу для редактирования с Диви строитель. Выберите "Строить с нуля", и мы готовы работать!
Раздел 1: Строительство дизайна
Мы упоминали ранее, что мы создадим структуру нашего дизайна в первой части. Как только мы закончили с установкой наложения изображения с разделенными текстовыми ставнями, мы загрузим анимацию на следующую часть.
Добавить: Строка 1
Настройки строки
Добавьте обычную строку столбца 2 в разделе и перед добавлением дополнительных модулей измените следующие настройки.
- Ширина гуттера: 2
Настройки столбца
Колонны будут держать наши изображения и элементы наложения затвора, так что это будет наш основной контейнер. Кроме того, этот столбец будет инициировать затвор анимации наведении эффектов. Просто, когда мышь входит внутрь этой колонки - вся анимация начнется и, как только мышь выйдет, она вернется в прежнее состояние.
Добавьте класс CSS в столбец, чтобы выбрать нашу колонку в качестве "колонки затвора" и оживить ее позже "наведении".
- Класс CSS: затвор-колонка наведении
Также внесите следующие коррективы.
- Горизонтальный переполнение: Скрытые
- Вертикальный перелив: Скрытые
Добавить: Модуль изображений
Теперь мы добавим наше основное изображение, которое будет сидеть за нашим затвором наложения с модулем изображения.
Теперь внести небольшие изменения в выравнивание под вкладкой дизайна.
- Выравнивание изображений: Центр
Создание верхнего текста сплита затвора
По мере того как наше изображение помещено, мы добавим модуль текста под модулем изображения для того чтобы добавить верхний затвор.
Обновление текстового модуля с текстом.
Откройте вкладку дизайна, внесите эти коррективы.
- Текстовый шрифт: Поппинс
- Вес текстового шрифта: тяжелый
- Стиль текстового шрифта: TT
- Цвет текста: #ffffff
- Размер текста: 150px (рабочий стол), 20vw (планшет и телефон)
- Интервал текстовых букв: -0.03em
- Высота текстовой строки: 0em
- Выравнивание текста: Центр
Теперь обновим настройки размера и интервала.
- Ширина: 100%
- Рост: 50%
- Маржа: 0px дно
Теперь добавьте следующий класс CSS из расширенной вкладки.
- Класс CSS: топ-затвор
Позже мы будем использовать класс для переключения и выключать анимацию преобразования с пользовательским кодом. Затем добавьте этот код CSS в основной элемент.
display:flex;
align-items:flex-end;
justify-content:center;
Чтобы привести наш текст в положение, мы должны внести эти изменения.
Создание нижнего затвора Сплит Текст
Так как наш верхний затвор разделенный текст делается, дублировать текстовый модуль для создания нижнего затвора раскол текста. Вам не нужно добавлять какой-либо класс CSS; как мы только что клонировали предыдущий модуль, класс CSS уже существует. Но нам нужно внести некоторые коррективы в код CSS на главном элементе.
display:flex;
align-items:flex-start;
justify-content:center;
Ссылка на "гибкий старт" текст вертикально выровнен в верхней части модуля. В предыдущем текстовом модуле мы установили высоту строки на уровне 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;
}
Код JS
Затем добавьте следующий код J-Куэри в тег скрипта.
(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);
Раздел 3: Сплит Текст Затвор Анимация Дизайн
Теперь мы будем дублировать первый раздел нашего дизайна, чтобы создать нашу первую анимацию затвора.
Добавить: Лучшие свойства преобразования затвора
Обычно, когда мы анимировать что-то с помощью CSS Transform Properties, нет стиля преобразования для этого элемента в начале. Затем, завис над элементом, мы можем увидеть этот стиль. В Диви мы вернем весь процесс вспять. Сначала мы преобразуем этот элемент с помощью Divi Builder. Преимущество этого заключается в том, что мы можем редактировать все визуально. Затем, когда укладка будет выполнена, мы сначала отключим его с помощью класса CSS. Затем переключит его и выключит, когда пользователь взаимодействует с наложением.
Чтобы добавить дизайн преобразования в верхний затвор, откройте верхние настройки текстового модуля затвора и обновим следующее:
- Шкала преобразования (X и Y): 150%
- Преобразование перевести Y-оси: -101%
- Преобразование происхождения: верхний центр
Если все правильно редактировать, то верхний текст затвора больше не будет виден, потому что мы хотим, чтобы все изображение было выставлено после перехода анимации.
Добавить: Нижняя затвора Преобразование Свойства
Для нижнего затвора, обновить следующие варианты преобразования дизайна:
- Шкала преобразования (X и Y): 150%
- Преобразование перевести Y-оси: 101%
- Преобразование происхождения: нижний центр
Добавить: Класс CSS для отключения свойства преобразования (первоначально)
Мы уже знаем, что после проектирования свойств преобразования для анимации затвора, мы отключим дизайн преобразования с помощью небольшого класса CSS. Из-за пользовательского кода CSS, который мы добавили ранее, дизайн будет отображаться без каких-либо преобразований конструкций на месте.
Добавить: Функциональность нажатия кнопки
Наша первая анимация была на эффекте наведении. Таким образом, зависание будет на самом деле вызвать анимацию с курсором мыши над изображением и текстом. Теперь мы увидим, как мы можем сделать это с щелчком мыши, не зависая. Очень просто, мы опустить "наведении" команды и добавить "на кнопку" команды в разделе.
- Класс CSS: затвор-колонка на-нажмите divi-преобразование-нет
Так что дизайн будет выглядеть так.
Обратный Анимация
Теперь, если мы хотим, мы можем сделать анимацию, где все изображение будет оставаться открытым и текст придет, когда мы парим - то есть как раз противоположное тому, что мы сейчас. Мы можем получить такую анимацию легко, удалив "диви-преобразование-нет" CSS класса.
Другой дизайн
Здесь у нас есть другой дизайн.
Обновление затворов
Выберите верхние и нижние текстовые модули из каждого шаблона затвора. Затем откройте настройки элемента для обоих и обновим следующее:
- Справочная информация: #ffffff
- Текст Текст Цвет: #000000
- Режим смешивания: Экран
Окончательный дизайн
Наш окончательный дизайн будет выглядеть так.
заключение
Любой дизайн, включая разделенный дизайн затвора текста, может быть сделано очень легко через Диви. Это очень эффективный способ привлечения посетителей. Надеюсь, сегодняшний учебник добавит новое измерение в дизайн вашего сайта. Если вам нравится этот учебник, не забудьте сообщить нам в поле комментариев.
