Пропустить

Как добавить анимированный счетчик к прокрутке на Divi

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

Часть 1: Создание титульного раздела

В этой первой части мы создадим простой заголовок для макета.

Сначала добавьте в раздел строку из одного столбца.

Зарегистрируйте модуль раздела divi

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

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

Сохранить дату
Сохранить дату 1

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

  • Заголовок 2 Шрифт: Prata
  • Элемент 2 Размер текста: 130px (рабочий стол), 70px (планшет), 40px (телефон)
Изменение названия Divi

Часть 2: Создание счетчиков с прокруткой анимации

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

Вот как.

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

Под существующей строкой добавьте еще одну строку в столбец.

Настройки линии

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

  • Ширина желоба: 1
  • Обивка: 0px высокий, 0px низкий
Конфигурация границы Divi

Параметры столбца

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

  • Обивка (рабочий стол): 100px low
  • Обивка (планшет и телефон): 0 пикселей
Конфигурация расстояния между столбцами Divi

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

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

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

Содержание / ярлык

Для содержания текстового модуля добавьте слово «месяц».

Укажите месяц divi

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

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

  • Цвет фона: #ffffff
  • Шрифт текста: Talk
  • Размер текста: 40px
  • Высота строки текста: 2em
  • Ширина: 100%
  • Заполнение: 20 пикселей вверху, 20 пикселей внизу, 20 пикселей слева, 20 пикселей справа
  • Ширина нижней границы: 5 пикс.
  • Цвет нижней границы: #eeeeee
Позиция

Затем на вкладке «Дополнительно» обновите параметры положения следующим образом:

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

  • Должность: Относительная
  • Z индекс 1
Модуль wordpress prata

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

Как только первый текстовый модуль будет на месте, мы можем начать добавлять числа, которые будут перемещаться по прокрутке. Чтобы добавить первое число, добавьте новый текстовый модуль под существующим текстовым модулем «Месяц».

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

Добавить номер / содержание

Затем обновите метку текстового модуля, чтобы она читалась как «num1» для более удобного использования. Затем обновите контент с номером «01».

Добавить модуль числа divi

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

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

  • Шрифт текста: Прата
  • Цвет текста текста: # 8ab2d3
  • Размер текста текста: 70px
  • Интервал между текстовыми буквами: 4 пикселя
  • Высота строки текста: 1.5em
  • Обивка: 20 пикселей слева
Цветовая конфигурация Divi

ПРИМЕЧАНИЕ. Числа имеют размер текста 70px и высоту строки 1.5em, что означает, что общая высота текстового модуля будет близка к 100px. Об этом важно помнить всякий раз, когда мы начинаем добавлять смещения по вертикали. Например, добавление вертикального смещения «1» к текстовому модулю сместит текстовый модуль точно на 100 пикселей, то есть к высоте текстового модуля.

Эффекты прокрутки для первого номера

Добавьте следующие эффекты прокрутки в текстовый модуль.

На вкладке «Вертикальное движение» обновите следующее:

  • Включить вертикальное движение: ДА
  • Начальное смещение: 1 (при 10%)
  • Среднее смещение: 0 (при 20%)
  • Конечное смещение: -1 (при 30%)

На вкладке Fade In и Fade Out обновите следующее:

  • Активировать появление и исчезновение: ДА
  • Начальная непрозрачность: 0% (при 10%)
  • Средняя непрозрачность: 100% (при 20%)
  • Конечная непрозрачность: 0% (до 30%)

Обязательно установите триггер для эффекта движения в верхней части клипа:

  • Триггер эффекта движения: верх элемента
Конфигурация модуля анимации divi text

Создать текстовый модуль для второго номера

Дублируйте первый номер

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

Дубликат текстового модуля Divi 1

Обновление номера / контента

Откройте параметры второго цифрового текстового модуля и обновите контент с номером «02».

Сохранить номер 2 divi

Обновить позицию

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

  • Позиция: Абсолют
  • Смещение по вертикали: 126 пикселей
Изменение положения текстового модуля divi

Обновить эффекты прокрутки

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

На вкладке «Вертикальное движение» обновите следующее:

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

  • Начальное смещение: 1 (при 20%)
  • Среднее смещение: 0 (при 30%)
  • Конечное смещение: -1 (при 40%)

На вкладке Fade In и Fade Out обновите следующее:

  • Начальная непрозрачность: 0% (при 20%)
  • Средняя непрозрачность: 100% (при 30%)
  • Конечная непрозрачность: 0% (до 40%)
Эффект анимации прокрутки divi

Создать текстовый модуль для третьего номера

Дублируйте второй номер

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

Дубликат текстового модуля № 3

Обновление номера / контента

Обновите контент с номером «03».

Изменить текстовый модуль divi

Обновить эффекты прокрутки

Затем обновите эффекты прокрутки:

На вкладке «Вертикальное движение» обновите следующее:

  • Начальное смещение: 1 (при 30%)
  • Среднее смещение: 0 (при 40%)
  • Конечное смещение: -1 (при 50%)

На вкладке Fade In и Fade Out обновите следующее:

  • Начальная непрозрачность: 0% (при 30%)
  • Средняя непрозрачность: 100% (при 40%)
  • Конечная непрозрачность: 0% (до 50%)
Редактировать анимацию текстового модуля

Создать текстовый модуль для четвертого номера

Третий дубликат выпуска

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

Дубликат текстового модуля divi номер 4

Обновление номера / контента

Обновите контент с номером «04».

Настроить значение текстового модуля divi

Обновить эффекты прокрутки

Затем обновите эффекты прокрутки:

На вкладке «Вертикальное движение» обновите следующее:

  • Начальное смещение: 1 (при 40%)
  • Среднее смещение: 0 (при 50%)
  • Конечное смещение: 0 (при 60%)

На вкладке Fade In и Fade Out обновите следующее:

  • Начальная непрозрачность: 0% (при 40%)
  • Средняя непрозрачность: 100% (при 50%)
  • Конечная непрозрачность: 100% (до 60%)
Модуль конфигурации анимации 4 divi

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

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

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

Затем выберите НЕТ, чтобы отобразить разделитель.

Не отображать разделитель divi

Настройки стиля и положения

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

  • Цвет фона: #ffffff
  • Ширина: 100%
  • Высота: 100px
  • Ширина верхней границы: 5 пикселей

На вкладке Дополнительно обновите следующее:

  • Деактивировать на: телефон и планшет
  • Позиция: Абсолют
  • Расположение: внизу слева

ВАЖНО: пространство, которое будет занимать разделитель, было создано ранее путем добавления к столбцу нижнего отступа 100 пикселей. Если вы не добавите это заполнение, разделитель будет перекрывать цифры.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Создание дополнительных счетчиков и столбцов

Дублируйте столбец 1 и обновите содержимое

Чтобы создать новый счетчик, продублируйте столбец 1. Это создаст второй столбец с автоматически размещенными всеми элементами.

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

Дублировать divi целого столбца

Дублируйте столбец 2 и обновите содержимое

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

Конечный результат

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

Другие Ресурсы

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

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

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
0 акции
доля
чирикать
Регистрация