Анимираните броячи на числа са популярни в мрежата като начин за показване на числа. données за подчертаване на стойността на услугите, казуси и др. Divi има специален модул за брояч на числа, който може да се използва за лесно генериране на анимирани броячи на числа.

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

Част 1: Създаване на заглавния раздел

В тази първа част ще създадем просто заглавие за оформлението.

Първо, добавете ред от една колона към раздела.

След това добавете нов текстов модул към реда.

Актуализирайте съдържание на текстовия модул със следните елементи:

Запишете датата
Запазете датата 1

След това актуализирайте стила на заглавния текст, както следва:

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

Част 2: Създаване на броячи със превъртаща се анимация

В тази следваща част ще създадем трите брояча, които ще анимират превъртащите се числа, докато те спрат да показват дата (месец, ден и година). Всеки брояч ще бъде изграден, като се използват общо 5 текстови модула и разделител. Първият текстов модул ще служи като етикет на брояча (т.е. месец, ден, година). Следващите четири текстови модула ще съдържат различен номер (в процес на изпълнение), който ще бъде анимиран при превъртане, използвайки отместванията на вертикалното движение в Divi. Долният модул за разделяне ще помогне да се скрие преливането на числа.

Ето как.

Добавете втори ред

Под съществуващия ред добавете още един ред в колона.

Добавете нов модул divi

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

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

  • Ширина на улука: 1
  • Подплащане: 0px високо, 0px ниско
Конфигурация на границата на Divi

Параметри на колоната

След това отворете настройките на колоната и актуализирайте попълването, както следва:

  • Подложка (бюро): 100px ниско
  • Подплънки (таблет и телефон): 0px ниско
Конфигурация на разстоянието между колоните Divi

Добавете текстов модул

След това добавете текстов модул в колоната.

Добавете текстов модул divi

Съдържание / етикет

за съдържание от текстовия модул добавете думата „месец“.

Посочете дивизия за месеца

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

След като съдържание добавен, актуализирайте настройките на дизайна, както следва:

  • Цвят на фона: #ffffff
  • Шрифт на текст: Говорете
  • Размер на текста: 40px
  • Височина на реда на текста: 2em
  • Ширина: 100%
  • Подплащане: 20 пиксела в горната част, 20 пиксела в долната част, 20 пиксела вляво, 20 пиксела вдясно
  • Ширина на долната граница: 5px
  • Цвят на долната граница: #eeeeee
Позиция

След това под раздела за разширени актуализирайте опциите за позиция, както следва:

  • Позиция: Относителна
  • Z индекс 1
Прата wordpress модул

Добавете текстов модул за първия брой

След като първият текстов модул е ​​на мястото си, можем да започнем да добавяме числата, които ще се движат на свитъка. За да добавите първото число, добавете нов текстов модул под съществуващия текстов модул "Месец".

Добавете текстов модул на разказвач

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

След това актуализирайте етикета на текстовия модул, за да прочетете „num1“ за по-лесно справяне. След това актуализирайте съдържанието с номер "01".

Добавяне на модул за дивиден номер

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

В раздела за дизайн актуализирайте следното:

  • Текстов шрифт: Prata
  • Цвят на текста на текста: # 8ab2d3
  • Размер на текста на текста: 70px
  • Разстояние между текстовите букви: 4px
  • Височина на текстовата линия: 1.5ем
  • Подложка: 20px вляво
Цветна конфигурация Divi

ЗАБЕЛЕЖКА: Числата имат размер на текста 70px и височина на реда 1.5em, което означава, че общата височина на текстовия модул ще бъде близка до 100px. Това е важно да се има предвид, когато започнем да добавяме вертикални компенсации на движение. Например, добавянето на вертикално отместване от „1“ към текстовия модул ще премести текстовия модул точно 100 px, което е височината на текстовия модул.

Ефекти на превъртане за първо число

Добавете следните ефекти на превъртане към текстовия модул.

В раздела за вертикално движение актуализирайте следното:

  • Активиране на вертикалното движение: ДА
  • Стартово изместване: 1 (при 10%)
  • Средно компенсиране: 0 (при 20%)
  • Крайна компенсация: -1 (при 30%)

В раздела Fade In и Fade Out актуализирайте следното:

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

Уверете се, че сте задали спусъка за ефекта на движение в горната част на клипа:

  • Задействане на ефекта на движението: Елемент отгоре
Конфигурация на анимационен модул divi текст

Създайте текстовия модул за второто число

Дублирайте първото число

След като първото число е създадено, дублирайте го, за да създадете текстов модул за второ число. След това актуализирайте етикета в изгледа на слоевете за по-добра справка.

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

Актуализирайте номер / съдържание

Отворете параметрите на втория цифров текстов модул и актуализирайте съдържанието с числото "02".

Запазете номер 2 divi

Актуализирайте позицията

След това актуализирайте опциите за позицията, както следва:

  • Позиция: Абсолютна
  • Вертикално изместване: 126px
Промяна на позицията на текстовия модул divi

Актуализирайте ефектите на превъртане

След това актуализирайте ефектите на превъртане, както следва:

В раздела Вертикално движение актуализирайте следното:

  • Стартово изместване: 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
  • Ширина на горната граница: 5px

В раздела Разширени актуализирайте следното:

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

ВАЖНО: Пространството, което ще заема разделителят, е създадено по-рано чрез добавяне на 100 пиксела долна подложка към колоната. Ако не добавите тази подложка, разделителят ще припокрива цифрите.

Създаване на допълнителни броячи и колони

Дублирайте колона 1 и актуализирайте съдържанието

За да създадете нов брояч, дублирайте колона 1. Това ще създаде втора колона с всички елементи на място автоматично.

Тогава всичко, което трябва да направите, е да актуализирате съдържанието на всички текстови модули с нови текстове и числа.

Дублирайте divi на цялата колона

Дублирайте колона 2 и актуализирайте съдържанието

След като съдържанието на всички текстови модули се актуализира в колона 2, дублирайте колона 2, за да създадете трети брояч за годината. След това актуализирайте съдържанието на всеки текстов модул, ако е необходимо.

Краен резултат

Ето и крайния резултат.

Други ресурси

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

Това просто оформление с превъртащи се анимирани броячи на числа трябва да е полезно за показване données дигитално по нов и уникален начин. Чувствайте се свободни да се откажете от концепцията за дати и да използвате броячите за всичко, за което можете да мечтаете!

Тя ПИН на Pinterest