Создание эффектов прокрутки с помощью разделителя разделов — это простая и забавная техника, которая может оживить ваши изображения. Веб-сайт с помощью WordPress тема Диви. Разделитель разделов по-прежнему остается универсальным элементом дизайна, полезным для придания креативности вашим переходам. содержание де страница.
Но с эффектами прокрутки Divi разделители разделов становятся еще интереснее! Хитрость заключается в том, чтобы выделить раздел, посвященный выбранному стилю разделителя. Затем вы можете добавить в раздел всевозможные движения, генерируемые прокруткой, чтобы создать красивые эффекты прокрутки в качестве фона для содержание стр.
Давайте начнем!
Возможный результат
Вот обзор дизайнов, которых мы сможем достичь после завершения этого урока.
Как создать анимированные разделители разделов прокрутки с Divi
Создание двух разделов контента
Добавить строку
Для начала создайте строку с одним столбцом в разделе по умолчанию.
Граница раздела (для тестов)
В целях тестирования добавьте в раздел верхнее поле, чтобы у нас было место для прокрутки. Откройте настройки раздела и добавьте следующее:
- Верхнее поле: 80vh
Добавить текстовый модуль
В строке столбца добавьте новый текстовый модуль.
Содержание текстового модуля
Внутри содержание тела, добавьте следующий заголовок H2:
<h2>Section Avec Séparateurs</h2>
Дизайн текстового модуля
Под настройками дизайна обновите следующее:
- Шрифт текста: Робото
- Выравнивание текста: центр
- Элемент 2 Цвет текста: # bae0d8
- Заголовок 2 Размер текста: 80px (рабочий стол), 50px (планшет), 30px (телефон)
Добавить второй раздел контента
Под предыдущим разделом добавьте новый обычный раздел.
Добавить строку
В новом разделе добавьте строку в столбец.
Добавить текстовый модуль
Затем добавьте новый текстовый модуль в строку.
Дизайн текстового модуля
На данный момент мы можем оставить внутри body содержимое отступа по умолчанию. Перейдем к вкладке дизайна и обновим следующее:
- Шрифт текста: Робото
- Цвет текста текста: #dddddd
- Размер текста: 16px
- Высота строки текста: 1,5 em
- Выравнивание текста: слева
- Максимальная ширина: 400 пикселей
- Выравнивание модуля: центр
Настройки раздела
Обязательно удалите цвет фона раздела по умолчанию, но сделайте его полностью прозрачным. Затем мы можем удалить верхний отступ и добавить нижнее поле для проверки прокрутки.
Для этого откройте раздел настроек и обновите следующее:
- Цвет фона: rgba (0,0,0,0)
- Нижнее поле: 80vh
- Обивка: 0px
Создание анимированного разделителя разделов
Как только два раздела контента завершены, мы готовы добавить раздел для наших анимированных разделителей разделов.
Добавить новый раздел
Идите дальше и создайте новый регулярный раздел в середине двух разделов контента.
Контекст раздела
И снова удалите цвет фона раздела по умолчанию, но обновите следующее:
- Цвет фона: rgba (0,0,0,0)
Конструкция разделителя секций
Не волнуйтесь, мы создадим цвет фона с помощью разделителей разделов. Для этого щелкните вкладку дизайна и добавьте в раздел верхний и нижний разделитель следующим образом:
Превосходный дизайн делителя
- Стиль верхнего разделителя: см. Снимок экрана
- Цвет верхнего делителя: # 524fbf
- Высота верхнего делителя: 20vw
- Горизонтальное повторение верхнего делителя: 0,6х
- Переворот верхнего делителя: горизонтальный
Нижняя конструкция делителя
- Стиль нижнего разделителя: см. Снимок экрана
- Цвет нижнего разделителя: # 524fbf
- Высота нижнего делителя: 20vw
- Горизонтальное повторение нижнего делителя: 0,5x
- Наклон нижнего делителя: горизонтальный и вертикальный
Высота секции и отступы
Поскольку этот раздел предназначен исключительно для дизайна разделителя, мы можем избавиться от высоты и заполнения, чтобы отображался только стиль разделителя, и между двумя разделами содержимого не появлялось ненужного пространства. Обновите следующее:
- Высота: 0px
- Обивка: 0px высокий, 0px низкий
Эффекты прокрутки разделителя разделов
Затем дайте разделу следующие эффекты прокрутки:
Под вкладкой Горизонтальное движение ...
- Активировать горизонтальное движение: ДА
Мы можем сохранить настройки по умолчанию для этого в представлении офис .
Затем обновите параметры горизонтального перемещения на таблетки :
- Начальное смещение: 3 (в 0% окна)
- Среднее смещение: 0 (при 50% области просмотра)
- Конечное смещение: -3 (при 100% области просмотра)
Под вкладкой Эффект увеличения и уменьшения , обновите следующее на офис ...
- Начальная шкала: 200% (в 0% окна)
- Средний масштаб: 150% (при 45% -65% области просмотра)
- Конечный масштаб: 150% (при 100% области просмотра)
Затем обновите эффект масштабирования вверх и вниз на таблетки следующим образом:
- Начальный масштаб: 400% (в 0% окна)
- Средний масштаб: 300% (при 45% -65% области просмотра)
- Конечный масштаб: 400% (при 100% области просмотра)
Основная причина, по которой нам нужно настроить эффекты движения на планшете (и телефоне), связана со значениями горизонтального движения с использованием единиц длины в пикселях (т. Е. 3 = 300 пикселей), которые абсолютные и не подстраиваются под ширину браузера.
Теперь давайте посмотрим на конечный результат нашего прокручиваемого анимированного разделителя разделов.
Заключительные мысли
Анимация разделителей разделов на свитке - интересный и эффективный способ оживить веб-страницу. Надеюсь, это вдохновит вас на создание еще более креативных дизайнов.