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

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

Давайте начнем!

Возможный результат

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

Divi анимация

Как создать анимированные разделители разделов прокрутки с Divi

Создание двух разделов контента

Добавить строку

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

Добавить раздел divi

Граница раздела (для тестов)

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

  • Верхнее поле: 80vh
Настроить интервал между разделами divi

Добавить текстовый модуль

В строке столбца добавьте новый текстовый модуль.

Текстовый модуль Divi

Содержание текстового модуля

Внутри содержание тела, добавьте следующий заголовок H2:

<h2>Section Avec Séparateurs</h2>

Раздел с разделителем

Дизайн текстового модуля

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

  • Шрифт текста: Робото
  • Выравнивание текста: центр
  • Элемент 2 Цвет текста: # bae0d8
  • Заголовок 2 Размер текста: 80px (рабочий стол), 50px (планшет), 30px (телефон)
Конфигурация шрифта Divi

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

Под предыдущим разделом добавьте новый обычный раздел.

эффекты прокрутки разделителя

Добавить строку

В новом разделе добавьте строку в столбец.

Добавить раздел divi 1

Добавить текстовый модуль

Затем добавьте новый текстовый модуль в строку.

Добавить текстовый модуль divi

Дизайн текстового модуля

На данный момент мы можем оставить внутри body содержимое отступа по умолчанию. Перейдем к вкладке дизайна и обновим следующее:

  • Шрифт текста: Робото
  • Цвет текста текста: #dddddd
  • Размер текста: 16px
  • Высота строки текста: 1,5 em
  • Выравнивание текста: слева
  • Максимальная ширина: 400 пикселей
  • Выравнивание модуля: центр
Настроить модуль divi стиля текста

Настройки раздела

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

Для этого откройте раздел настроек и обновите следующее:

  • Цвет фона: rgba (0,0,0,0)
  • Нижнее поле: 80vh
  • Обивка: 0px
Конфигурация разделительного интервала Divi

Создание анимированного разделителя разделов

Как только два раздела контента завершены, мы готовы добавить раздел для наших анимированных разделителей разделов.

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

Идите дальше и создайте новый регулярный раздел в середине двух разделов контента.

Добавить обычный раздел divi

Контекст раздела

И снова удалите цвет фона раздела по умолчанию, но обновите следующее:

  • Цвет фона: rgba (0,0,0,0)
Персональный фон раздел divi

Конструкция разделителя секций

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

Превосходный дизайн делителя

  • Стиль верхнего разделителя: см. Снимок экрана
  • Цвет верхнего делителя: # 524fbf
  • Высота верхнего делителя: 20vw
  • Горизонтальное повторение верхнего делителя: 0,6х
  • Переворот верхнего делителя: горизонтальный
Конфигурация границы раздела Divi

Нижняя конструкция делителя

  • Стиль нижнего разделителя: см. Снимок экрана
  • Цвет нижнего разделителя: # 524fbf
  • Высота нижнего делителя: 20vw
  • Горизонтальное повторение нижнего делителя: 0,5x
  • Наклон нижнего делителя: горизонтальный и вертикальный
Селектор нижнего деления
Высота секции и отступы

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

  • Высота: 0px
  • Обивка: 0px высокий, 0px низкий
Секция низкого делителя divi
Эффекты прокрутки разделителя разделов

Затем дайте разделу следующие эффекты прокрутки:

Под вкладкой Горизонтальное движение ...

  • Активировать горизонтальное движение: ДА

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

Divi с горизонтальной прокруткой

Затем обновите параметры горизонтального перемещения на таблетки :

  • Начальное смещение: 3 (в 0% окна)
  • Среднее смещение: 0 (при 50% области просмотра)
  • Конечное смещение: -3 (при 100% области просмотра)
Стол для горизонтальной очистки divi

Под вкладкой Эффект увеличения и уменьшения , обновите следующее на офис ...

  • Начальная шкала: 200% (в 0% окна)
  • Средний масштаб: 150% (при 45% -65% области просмотра)
  • Конечный масштаб: 150% (при 100% области просмотра)
Конфигурация макета

Затем обновите эффект масштабирования вверх и вниз на таблетки следующим образом:

  • Начальный масштаб: 400% (в 0% окна)
  • Средний масштаб: 300% (при 45% -65% области просмотра)
  • Конечный масштаб: 400% (при 100% области просмотра)

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

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

Возможный конечный результат

Заключительные мысли

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