Изучение того, как создавать и анимировать формы CSS в Divi

Создание фигур с помощью CSS в веб-дизайне ни в коем случае не новость. Фактически, классический метод создания фигур CSS был в значительной степени омрачен другими графическими решениями HTML, такими как Canvas и SVG. Однако фигуры CSS (по крайней мере, базовые) создавать намного проще, и они по-прежнему могут играть значительную роль в веб-дизайне. Кроме того, когда вы добавляете к этим фигурам анимацию прокрутки, может появиться совершенно новый элемент дизайна.

В этом уроке мы собираемся изучить, как создавать и анимировать формы CSS в 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.

Изучение того, как создавать формы CSS с анимацией в Divi

Структура строк и столбцов

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

Прежде чем делать что-либо еще, откройте настройки строки и обновите следующее:

• Ширина желоба: 1
• Выровнять высоту столбца: ДА
• Ширина: 95%
• Максимальная ширина: 900 пикселей

ПРИМЕЧАНИЕ. Эти настройки имеют решающее значение для настройки нашего дизайна. Например, структура столбца из одной трети и двух третей в сочетании со строкой с максимальной шириной 900 пикселей без каких-либо полей (ширина желоба 1), давайте узнаем, что ширина левого столбца будет ровно 300 пикселей. Кроме того, если я сохраню свой дизайн в пределах этого столбца шириной 300 пикселей, я могу быть уверен, что он будет хорошо смотреться на планшетах и ​​мобильных устройствах.

Добавление разделителя модуля разделителя

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

На этом этапе вы должны открыть модальное окно просмотра слоев для управления слоями / модулями в будущем, которые можно найти в меню настроек Divi Builder.

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

• Показать разделитель: НЕТ
• Высота: 150 пикселей

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

Создание первой формы CSS с использованием параметров границы

Чтобы создать нашу CSS-форму, мы собираемся использовать модуль разделителя. Технически мы используем только границы, которые окружают модуль, а не область модуля. (Таким образом, вы можете использовать другие модули, такие как текстовые модули или модули кода).

Чтобы создать CSS-форму, продублируйте уже созданный ранее модуль разделителя.

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

• Ширина: 0 пикселей
• Высота: 0 пикселей

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

• Цвет границы: rgba (245,44,143,0,5)
• Ширина верхней границы: 150 пикселей
• Ширина левой границы: 150 пикселей
• Цвет левой границы: прозрачный

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

Также хорошей идеей будет обозначить этот новый разделитель как «форма 1» для облегчения идентификации в дальнейшем.

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

На вкладке «Дополнительно» измените положение на абсолютное и оставьте положение положения по умолчанию в верхнем правом углу:

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

ПРИМЕЧАНИЕ. Важно, чтобы расположение позиции было вверху справа, потому что любые другие местоположения, которые добавляют расположение по центру (например, по центру вверху или по центру), будут конфликтовать с параметрами преобразования, которые мы добавим в фигуры CSS позже.

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

Создание фигуры 2 с помощью анимации прокрутки

Чтобы создать следующую фигуру (или треугольник в данном случае), продублируйте предыдущий модуль разделителя (фигура 1), чтобы добавить идентичный верхний правый треугольник, который находится непосредственно над предыдущей формой треугольника.

Затем назовите его «форма 2».

Откройте настройки разделителя «фигура 2» и добавьте следующий эффект вращающегося преобразования:

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

Создание фигуры 3 с помощью анимации прокрутки

Дублируйте модуль разделителя «shape 2» и назовите дубликат «shape 3».

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

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

Чтобы создать последнюю (четвертую) фигуру, продублируйте разделительный модуль фигуры 3 и назовите его «фигура 4».

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

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

На этом этапе вы должны увидеть квадратную форму, созданную перекрывающимися и теперь повернутыми треугольниками.

Тестирование анимации прокрутки

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

• Маржа: 80vh сверху, 80vh снизу

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

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

Добавление фиктивного заголовка в правый столбец (необязательно)

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

Столбец Custom CSS

Прежде чем добавить заголовок, мы можем убедиться, что текст в столбце вертикально центрирован, используя свойство display flex. Откройте настройки для столбца 2 и добавьте следующий настраиваемый CSS к основному элементу:

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

Как только CSS столбца будет на месте, добавьте новый текстовый модуль в столбец 2.

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

<h2>elegant design</h2>

На вкладке дизайна обновите следующее:

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

Пока мы находимся в этом, добавьте к тексту следующий эффект «горизонтального движения» с преобразованием прокрутки следующим образом:

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

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

• Конечное смещение (планшет и телефон): 0

Изучение анимации формы верхнего правого треугольника

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

Один из простых способов сделать это - использовать множественный выбор для выбора всех четырех фигур CSS (построенных с помощью модулей разделителей).

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

Затем выберите вкладку «Дизайн» и откройте вкладку «Источник преобразования». Разместите модальное представление слоев и модальное окно настроек элемента слева, чтобы вы могли визуально видеть изменения в Divi Builder.

Изучение анимации дизайна формы CSS с направленным вверх треугольником

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

В следующем примере мы собираемся создать фигуру CSS «Восходящий треугольник» (технически равнобедренный треугольник).

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

• Ширина правой границы: 100 пикселей
• Цвет правой границы: прозрачный
• Ширина нижней границы: 100 пикселей
• Цвет нижней границы: rgba (245,44,143,0,5)
• Ширина левой границы: 100 пикселей
• Цвет левой границы: прозрачный

Обновите Transform Origin, чтобы исследовать новые дизайны анимации прокрутки

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

Изучение анимации дизайна формы CSS Teardrop

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

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

• Закругленные углы: 0 пикселей вверху справа, 50% вверху справа, 50% внизу справа, 50% внизу слева.
• Ширина нижней границы: 150 пикселей
• Цвет нижней границы: rgba (245,44,143,0,5)
• Ширина левой границы: 150 пикселей
• Цвет левой границы: прозрачный

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

Изучение анимации дизайна CSS-формы сектора (или кусочка пиццы)

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

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

• Закругленные углы: 0 пикселей вверху справа, 0 пикселей вверху справа, 50% внизу справа, 50% внизу слева.
• Ширина правой границы: 75 пикселей
• Цвет правой границы: прозрачный
• Ширина нижней границы: 75 пикселей
• Цвет нижней границы: rgba (245,44,143,0,5)
• Ширина левой границы: 75 пикселей
• Цвет левой границы: прозрачный

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

Изучение анимации дизайна трапециевидной формы CSS

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

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

• Закругленные углы: 0 пикселей
• Ширина правой границы: 100 пикселей
• Цвет правой границы: прозрачный
• Ширина нижней границы: 100 пикселей
• Цвет нижней границы: rgba (245,44,143,0,5)
• Ширина левой границы: 100 пикселей
• Цвет левой границы: прозрачный

Затем обновите ширину фигур / модулей следующим образом:

• Ширина: 100 пикселей

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

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

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

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

Изучение того, как создавать и анимировать CSS-формы в Divi, может быть отличным способом получить эти творческие соки, поскольку вы расширяете свое представление о мощи встроенных возможностей дизайна Divi. Уловка состоит в том, чтобы понять, как использовать границы для создания различных форм. Затем вы можете добавить к этим фигурам анимацию прокрутки. Но не забывайте о силе источника преобразования, которая меняет способ позиционирования каждой формы в этих анимациях. Это, конечно, верхушка айсберга, когда вы думаете обо всех различных формах и анимациях, которые вы можете комбинировать, чтобы создавать бесконечные креативные дизайны для своего веб-сайта.

Надеюсь, это даст вам несколько идей о том, как добавить идеальную анимацию CSS Shape на ваш собственный сайт.

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

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