Создание анимации прокрутки фона текста — это уникальный способ добавить к тексту красочные анимированные текстуры. Веб-сайт пока пользователь прокручивает страницу. С Divi, процесс на удивление прост, если вы изучите несколько ключевых приемов.
В этом уроке мы будем использовать только встроенные параметры Divi создать 3 уникальных дизайна с красочной анимацией прокрутки фона текста. Мы даже покажем вам, как создать темную версию каждого дизайна для совершенно нового вида.
Давайте начнем!
Возможный результат
Взгляните на конструкции, которые мы будем строить сегодня.
Дизайн 1: градиент фона текста с эффектом горизонтальной прокрутки
Этот первый дизайн будет иметь эффект горизонтальной прокрутки, который анимирует цветной разделительный модуль за текстовым модулем с экранным фильтром.
Добавить столбец
Для начала добавьте строку из одного столбца в раздел по умолчанию.
Добавить текстовый модуль
Затем добавьте новый текстовый модуль в столбец.
Содержание
Для содержание столбец, вставьте в поле следующий HTML-код содержание:
Форматирование текста
Затем обновите текстовый дизайн следующим образом:
- Цвет фона: #ffffff
- Стиль шрифта текста: TT
- Цвет текста: # 000000
- Размер текста: 100 пикселей (рабочий стол), 40 пикселей (телефон)
- Интервал между текстовыми буквами: 0.15em
- Высота строки текста: 1em
- Выравнивание текста: центр
- Название шрифта: Merriweather
- Вес шрифта заголовка: жирный
- Стиль шрифта заголовка: TT
- Выравнивание текста заголовка: по центру
- Цвет текста заголовка: # 000000
- Размер текста заголовка: 200 пикселей (рабочий стол), 80 пикселей (телефон)
- Интервал заглавной буквы: 0.15em
- Высота строки заголовка: 1em
Заполнение и фильтр
Теперь нам нужно добавить отступы и экранный фильтр в текстовый модуль. Фильтр необходим для работы этого дизайна, так как он позволяет отображать цвета / моды фона за текстом.
Чтобы добавить заливку и фильтр, обновите следующее:
- отступы: 15 пикселей в высоту, 20 пикселей в высоту
- Режим смешивания: экран
Примечание. Режим наложения экрана лучше всего работает с черным текстом на белом фоне. Если бы мы хотели использовать белый текст на черном фоне, мы бы использовали режим наложения «Умножение».
Верхний и нижний разделитель
Как только наш текстовый модуль будет завершен, давайте добавим несколько разделителей (над и под текстовым модулем) для дополнительного элемента дизайна.
Добавить нижний разделитель
Добавьте новый модуль разделения под текстовым модулем.
Более высокие настройки разделения
Откройте настройки разделителя и выберите «НЕТ», чтобы отобразить разделитель.
Затем обновите фон и задайте разделителю тот же режим наложения, что и текстовый модуль, как показано ниже:
- Цвет левого градиента: # 000000
- Цвет градиента фона справа: #ffffff
- Направление градиента: 90deg
- Начальная позиция: 48%
- Конечная позиция: 0%
- Режим смешивания: экран
Затем обновите высоту разделителя на экране телефона следующим образом:
- Высота: 15 пикселей (телефон)
Добавить верхний разделитель
Чтобы создать верхний разделитель, продублируйте предыдущий нижний разделитель и перетащите его над текстовым модулем, используя область отображения слоев.
Затем инвертируйте цвета на градиентном фоне.
Обновить параметры линии
Как только наш верхний и нижний разделители будут установлены, обновите параметры строки следующим образом:
- Ширина желоба: 1 (для удаления нижних полей между модулями)
- Максимальная ширина: 600 пикселей (для сохранения согласованного дизайна на рабочем столе и планшете)
- Выравнивание линии: центр
- Обивка: 0px высокий, 0px низкий
- Горизонтальное переполнение: скрыто
- Вертикальный перелив: скрытый
Создайте разделитель для цвета фона анимированного текста
Последний элемент этого первого дизайна - разделитель, который мы будем использовать для анимации цвета фона текста на прокрутке. Для этого нужно добавить новый разделительный модуль под нижний разделитель.
Затем выберите НЕТ, чтобы отобразить разделитель.
Настройки разделителя фона
Обновите разделитель с градиентным фоном следующим образом:
- Цвет левого градиента: # e02b20
- Правильный цвет градиента фона: # 8300e9
- Направление градиента: 90deg
- Начальная позиция: 30%
- Конечная позиция: 70%
Мы хотим, чтобы высота разделителя была достаточно высокой, чтобы раскрасить весь наш текст в текстовом модуле, а также верхний и нижний разделители. Для этого дизайна установите высоту 400 пикселей.
- Высота: 400px
Затем задайте разделителю абсолютное положение, чтобы расположить его прямо над другими модулями. Используйте индекс Z, чтобы разместить разделитель позади других модулей.
- Позиция: Абсолют
- Z индекс: -1
Эффекты прокрутки фонового разделителя
Когда разделитель установлен, все, что нам нужно сделать, это переместить разделитель за текст, используя эффекты прокрутки Divi. Для этого дизайна мы просто добавим горизонтальное движение прокрутки.
Обновите следующие пункты:
На вкладке Горизонтальное перемещение ...
офис
- Активировать горизонтальное движение: ДА
- Начальное смещение: 6 (при 20%)
- Среднее смещение: 0 (при 40% -60%)
- Конечное смещение: -6 (при 80%)
телефон
- Начальное смещение: 3
- Конечное смещение: -3
Также не забудьте установить триггер для эффекта движения в середине клипа:
- Эффект движения триггера: середина элемента
Добавить интервал раздела
Чтобы создать временное пространство прокрутки для проверки дизайна, добавьте в раздел следующее:
- Маржа: 80vh выше, 80vh ниже
Заключительные мысли
Дизайн текстовой фоновой анимации, показанный в этой статье, на самом деле отлично работал бы как статический дизайн без добавления движения на прокрутке. Однако дополнительные эффекты прокрутки действительно выводят дизайн на совершенно новый уровень. Не стесняйтесь экспериментировать с большим количеством цветов и эффектов!
Я с нетерпением жду вашего ответа в комментариях.
За ваше здоровье!
