Анимированные счетчики чисел популярны в Интернете как способ отображения чисел. данные чтобы подчеркнуть ценность услуг, тематических исследований и т. д. Divi имеет специальный модуль счетчика чисел, который можно использовать для простого создания анимированных счетчиков чисел.
Однако в этом уроке мы покажем вам, как создавать числовые счетчики, которые анимируются при прокрутке, используя Divi. Использование параметров положения и эффектов прокрутки Diviмы разработаем простой макет для отображения даты с прокруткой чисел.
Часть 1: Создание титульного раздела
В этой первой части мы создадим простой заголовок для макета.
Сначала добавьте в раздел строку из одного столбца.
Затем добавьте новый текстовый модуль в строку.
Обновите содержание текстового модуля со следующими элементами:
Сохранить дату
Затем обновите стиль текста заголовка следующим образом:
- Заголовок 2 Шрифт: Prata
- Элемент 2 Размер текста: 130px (рабочий стол), 70px (планшет), 40px (телефон)
Часть 2: Создание счетчиков с прокруткой анимации
В этой следующей части мы создадим три счетчика, которые будут анимировать прокручиваемые числа, пока они не перестанут отображать дату (месяц, день и год). Каждый счетчик будет построен с использованием всего 5 текстовых модулей и модуля разделителя. Первый текстовый модуль будет служить меткой счетчика (т.е. месяц, день, год). Следующие четыре текстовых модуля будут содержать разные числа (в процессе), которые будут анимироваться при прокрутке с использованием смещений вертикального перемещения в Divi. Нижний модуль разделения поможет скрыть перелив цифр.
Вот как.
Добавить вторую строку
Под существующей строкой добавьте еще одну строку в столбец.
Настройки линии
Перед добавлением модуля обновите параметры строки следующим образом:
- Ширина желоба: 1
- Обивка: 0px высокий, 0px низкий
Параметры столбца
Затем откройте настройки столбца и обновите заливку следующим образом:
- Обивка (рабочий стол): 100px low
- Обивка (планшет и телефон): 0 пикселей
Добавить текстовый модуль
Затем добавьте текстовый модуль в столбец.
Содержание / ярлык
Для содержание из текстового модуля добавьте слово «месяц».
Настройки дизайна текста
После того, как содержание добавлено, обновите настройки дизайна следующим образом:
- Цвет фона: #ffffff
- Шрифт текста: Talk
- Размер текста: 40px
- Высота строки текста: 2em
- Ширина: 100%
- Заполнение: 20 пикселей вверху, 20 пикселей внизу, 20 пикселей слева, 20 пикселей справа
- Ширина нижней границы: 5 пикс.
- Цвет нижней границы: #eeeeee
Позиция
Затем на вкладке «Дополнительно» обновите параметры положения следующим образом:
- Должность: Относительная
- Z индекс 1
Добавить текстовый модуль для первого выпуска
Как только первый текстовый модуль будет на месте, мы можем начать добавлять числа, которые будут перемещаться по прокрутке. Чтобы добавить первое число, добавьте новый текстовый модуль под существующим текстовым модулем «Месяц».
Добавить номер / содержание
Затем обновите метку текстового модуля, чтобы она читалась как «num1» для более удобного использования. Затем обновите контент с номером «01».
Настройки дизайна для номера
На вкладке «Дизайн» обновите следующее:
- Шрифт текста: Прата
- Цвет текста текста: # 8ab2d3
- Размер текста текста: 70px
- Интервал между текстовыми буквами: 4 пикселя
- Высота строки текста: 1.5em
- Обивка: 20 пикселей слева
ПРИМЕЧАНИЕ. Числа имеют размер текста 70px и высоту строки 1.5em, что означает, что общая высота текстового модуля будет близка к 100px. Об этом важно помнить всякий раз, когда мы начинаем добавлять смещения по вертикали. Например, добавление вертикального смещения «1» к текстовому модулю сместит текстовый модуль точно на 100 пикселей, то есть к высоте текстового модуля.
Эффекты прокрутки для первого номера
Добавьте следующие эффекты прокрутки в текстовый модуль.
На вкладке «Вертикальное движение» обновите следующее:
- Включить вертикальное движение: ДА
- Начальное смещение: 1 (при 10%)
- Среднее смещение: 0 (при 20%)
- Конечное смещение: -1 (при 30%)
На вкладке Fade In и Fade Out обновите следующее:
- Активировать появление и исчезновение: ДА
- Начальная непрозрачность: 0% (при 10%)
- Средняя непрозрачность: 100% (при 20%)
- Конечная непрозрачность: 0% (до 30%)
Обязательно установите триггер для эффекта движения в верхней части клипа:
- Триггер эффекта движения: верх элемента
Создать текстовый модуль для второго номера
Дублируйте первый номер
После создания первого числа скопируйте его, чтобы создать текстовый модуль второго числа. Затем обновите метку в просмотре слоев для лучшего понимания.
Обновление номера / контента
Откройте параметры второго цифрового текстового модуля и обновите контент с номером «02».
Обновить позицию
Затем обновите параметры позиции следующим образом:
- Позиция: Абсолют
- Смещение по вертикали: 126 пикселей
Обновить эффекты прокрутки
Затем обновите эффекты прокрутки следующим образом:
На вкладке «Вертикальное движение» обновите следующее:
- Начальное смещение: 1 (при 20%)
- Среднее смещение: 0 (при 30%)
- Конечное смещение: -1 (при 40%)
На вкладке Fade In и Fade Out обновите следующее:
- Начальная непрозрачность: 0% (при 20%)
- Средняя непрозрачность: 100% (при 30%)
- Конечная непрозрачность: 0% (до 40%)
Создать текстовый модуль для третьего номера
Дублируйте второй номер
Чтобы создать текстовый модуль для третьего номера, продублируйте текстовый модуль для второго номера.
Обновление номера / контента
Обновите контент с номером «03».
Обновить эффекты прокрутки
Затем обновите эффекты прокрутки:
На вкладке «Вертикальное движение» обновите следующее:
- Начальное смещение: 1 (при 30%)
- Среднее смещение: 0 (при 40%)
- Конечное смещение: -1 (при 50%)
На вкладке Fade In и Fade Out обновите следующее:
- Начальная непрозрачность: 0% (при 30%)
- Средняя непрозрачность: 100% (при 40%)
- Конечная непрозрачность: 0% (до 50%)
Создать текстовый модуль для четвертого номера
Третий дубликат выпуска
Чтобы создать четвертое число для счетчика прокрутки, продублируйте текстовый модуль для третьего числа.
Обновление номера / контента
Обновите контент с номером «04».
Обновить эффекты прокрутки
Затем обновите эффекты прокрутки:
На вкладке «Вертикальное движение» обновите следующее:
- Начальное смещение: 1 (при 40%)
- Среднее смещение: 0 (при 50%)
- Конечное смещение: 0 (при 60%)
На вкладке Fade In и Fade Out обновите следующее:
- Начальная непрозрачность: 0% (при 40%)
- Средняя непрозрачность: 100% (при 50%)
- Конечная непрозрачность: 100% (до 60%)
Добавить нижний разделитель
Под последним текстовым модулем добавьте новый модуль-разделитель. Это будет использоваться, чтобы скрыть нижнее переполнение прокручиваемого текста в поле зрения.
Затем выберите НЕТ, чтобы отобразить разделитель.
Настройки стиля и положения
Обновите конструкцию сепаратора следующим образом:
- Цвет фона: #ffffff
- Ширина: 100%
- Высота: 100px
- Ширина верхней границы: 5 пикселей
На вкладке Дополнительно обновите следующее:
- Деактивировать на: телефон и планшет
- Позиция: Абсолют
- Расположение: внизу слева
ВАЖНО: пространство, которое будет занимать разделитель, было создано ранее путем добавления к столбцу нижнего отступа 100 пикселей. Если вы не добавите это заполнение, разделитель будет перекрывать цифры.
Создание дополнительных счетчиков и столбцов
Дублируйте столбец 1 и обновите содержимое
Чтобы создать новый счетчик, продублируйте столбец 1. Это создаст второй столбец с автоматически размещенными всеми элементами.
Затем все, что вам нужно сделать, это обновить содержимое всех текстовых модулей с новыми текстами и номерами.
Дублируйте столбец 2 и обновите содержимое
После обновления содержимого всех текстовых модулей в столбце 2 продублируйте столбец 2, чтобы создать третий счетчик за год. Затем обновите содержимое каждого текстового модуля по мере необходимости.
Конечный результат
Вот окончательный результат.
Другие Ресурсы
- Как использовать модуль счетчика чисел на Divi
- Как использовать модуль кругового счетчика на Divi
- Как создать оживающие круговые счетчики на Divi
Заключительные мысли
Этот простой макет с прокручивающимися анимированными счетчиками чисел должен быть полезен для отображения данные цифровой в новом и уникальном виде. Не стесняйтесь отказаться от концепции даты и использовать счетчики для всего, что вы можете придумать!
