Как сделать анимированные формы с CSS в Divi

Rifat Divi Учебники May 11, 2021

Кто не любит анимацию? Анимация играет большую роль в дизайне сайта. Сегодня мы узнаем, как создавать фигуры, используя CSS и как добавить их анимационные эффекты. Мы использовали для использования HTML-решений, таких как Canvas или SVG, чтобы добавить такие пользовательские анимации на сайт, но сегодня мы увидим, как можно будет разработать такую ​​визуальную парадигку с Два, используя пользовательские CSS.

Во-первых, мы узнаем, как создать пользовательскую форму с использованием CSS, а затем предоставлять уникальный эффект прокрутки. Мы сделаем все это, используя встроенные функции Два. Так что давайте начнем.

предварительный просмотр

Наш последний дизайн будет выглядеть так.

Анимированные пользовательские формы с CSS

Добавить: строка в исходный раздел

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

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Теперь внесите некоторые изменения на настройках строки вкладки Design.

  • Используйте пользовательский канал желоба: Да
  • Ширина желоба: 1
  • Выравнивание высоты столбцов: да
  • Ширина: 95%
  • Макс. Ширина: 900px

Добавить: делитель модуль

Мы добавим делительный модуль для интервала в колонне, который будет содержать фигуры CSS.

Теперь откройте настройки делителя и внесите следующие изменения.

  • Показать разделитель: нет
  • Высота: 150px.

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

Форма CSS № 1

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

Теперь отредактируйте, как указано ниже.

  • Ширина: 0px.
  • Высота: 0PX.

Опции границы

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

  • Цвет границы: RGBA (28,160,96,0.5)
  • Верхняя ширина границы: 150px
  • Левая ширина границы: 150px
  • Левый цвет границы: прозрачный

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

  • Должность: абсолют
  • Расположение позиции: верхний план (по умолчанию)

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

CSS форма № 2

Теперь мы создадим еще один идентичный треугольник, клонируя наш модуль делителя, называемый формой 1 и пометить его в виде формы 2.

Прокрутка анимации

Теперь открывайте настройки для формы 2 и сделайте эти изменения.

  • Эффекты преобразования прокрутки: вращение
  • Включить вращение: да
  • Начальная ротация: 0 ° (при 30%)
  • Средние вращения: 45 ° (при 45%)
  • Окончание вращения: 90 ° (на 60%)

Форма CSS № 3

На этот раз дублируйте форму 2 и пометьте дублирующее делитель в виде формы 3.

Прокрутка анимации

Затем измените значения вращения преобразования.

  • Средние вращения: 90 °
  • Окончание вращения: 180 °

Форма CSS № 4

Опять же, дублируйте предыдущий модуль и назовите его как «форма 4».

Прокрутка анимации

Затем измените значения вращения преобразования.

  • Средние вращения: 180 °
  • Окончание вращения: 270 °

Прокрутка анимационного тестирования

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

  • Маржа: 80VH верхняя, 80VH дна

Добавление заголовка

Наличие анимированного названия с таким дизайном на веб-странице довольно хорошая. Таким образом, мы теперь добавим к нему название. До этого мы добавим некоторые CSS-коды в главной секции элементов расширенной вкладки в колонне 2 (где будет называться заголовка), чтобы наш заголовок оставался вертикально центрированным.

display:flex;
flex-direction:column;
align-items:center;

Теперь добавьте текстовый модуль в этот столбец 2 и добавьте несколько H2 в заголовке в это.

Теперь с вкладки «Дизайн» измените следующие настройки.

  • Направляя 2 шрифта: попс
  • Заголовок 2 Выравнивание текста: по умолчанию (Desktop), Center (планшет и телефон)
  • Рубрика 2 Размер текста: 55 пиксель (настольный), 45px (планшет), 35px (телефон)
  • Ширина: 100%

Теперь мы добавим эффект прокрутки на этот текст.

  • Эффекты преобразования прокрутки: горизонтальное движение
  • Включить горизонтальное движение: да
  • Стартовая смещение: 2 (на 20%)
  • Среднее смещение: 1 (на 35%)
  • Завершение смещения: рабочий стол -0.6 (при 50%), планшет и телефон 0 (на 50%)

Изучение в форме из разных углов

Сейчас мы сделаем с дизайнами, теперь мы можем исследовать разные формы для верхнего дизайна треугольника. Для этого удерживайте команду (для Mac) и Control (для Windows) и выберите все 4 фигуры и нажмите «Настройки любой формы». Это откроет комбинированные настройки для всех этих форм. и посмотрите, какой дизайн вам нравится больше всего.

окончательный взгляд

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

заключение

Люди, которые хотят принести новое измерение в их веб-дизайн, всегда будут искать что-то исключительное, например, этот тип дизайна. Пользовательская форма CSS с анимированной прокруткой определенно расширит красоту вашего проекта. Они очень просты в дизайне с Два, плюс ему не нужны дополнительные плагины, потому что все функции встроены. Я надеюсь, что вам понравится сегодняшнее учебное пособие, поскольку оно даст вам приятное представление о анимации формы CSS. Мы будем рады вашим мыслям по сегодняшней статье, и если вам это понравится, доля будет душит разум.