Анимираните броячи на числа са популярни в мрежата като начин за показване на числови данни, за да се подчертае стойността на услугите, казуси и други. Divi има специален модул за броячи на числа, който може да се използва за лесно генериране на анимирани броячи на числа.
В този урок обаче ще ви покажем как да създавате анимирани, скролиращи цифрови броячи, използвайки Divi. Използвайки опциите за позициониране и ефектите на скролиране на Divi, ще проектираме прост дизайн за показване на дата с скролиращи числа.
Част 1: Създаване на заглавния раздел
В тази първа част ще създадем просто заглавие за оформлението.
Първо, добавете ред с една колона към секцията.
След това добавете нов текстов модул към реда.
Актуализирайте съдържанието на текстовия модул със следното:
Запишете датата
След това актуализирайте стила на текста на заглавката, както следва:
- Заглавие 2 Шрифт: Prata
- Елемент 2 Размер на текста: 130px (десктоп), 70px (таблет), 40px (телефон)
Част 2: Създаване на броячи със превъртаща се анимация
В следващия раздел ще създадем три брояча, които ще анимират числата, докато се превъртат, докато спрат, за да покажат дата (месец, ден и година). Всеки брояч ще бъде изграден с помощта на общо пет текстови модула и един разделителен модул. Първият текстов модул ще служи като етикет на брояча (т.е. месец, ден, година). Следващите четири текстови модула ще съдържат различно (прогресивно) число, което ще бъде анимирано, докато се превърта, използвайки вертикалните отмествания на Divi. Долният разделителен модул ще помогне да се скрият всички препълващи числа.
Ето как.
Добавете втори ред
Под съществуващия ред добавете още един ред в колона.
Настройки на линията
Преди да добавите модул, актуализирайте параметрите на линията, както следва:
- Ширина на улука: 1
- Подплащане: 0px високо, 0px ниско
Параметри на колоната
След това отворете настройките на колоната и актуализирайте попълването, както следва:
- Подложка (бюро): 100px ниско
- Подплънки (таблет и телефон): 0px ниско
Добавете текстов модул
След това добавете текстов модул в колоната.
Съдържание / етикет
За съдържанието на текстовия модул добавете думата „месец“.
Настройки за дизайн на текст
След като съдържанието е добавено, актуализирайте настройките на дизайна, както следва:
- Цвят на фона: #ffffff
- Шрифт на текст: Говорете
- Размер на текста: 40px
- Височина на реда на текста: 2em
- Ширина: 100%
- Подплащане: 20 пиксела в горната част, 20 пиксела в долната част, 20 пиксела вляво, 20 пиксела вдясно
- Ширина на долната граница: 5px
- Цвят на долната граница: #eeeeee
Позиция
След това, в раздела „Разширени“, актуализирайте опциите за позиция, както следва:
- Позиция: Относителна
- Z индекс 1
Добавете текстов модул за първия брой
След като първият текстов модул е на мястото си, можем да започнем да добавяме числата, които ще се движат на свитъка. За да добавите първото число, добавете нов текстов модул под съществуващия текстов модул "Месец".
Добавете номер / съдържание
След това актуализирайте етикета на текстовия модул, за да прочетете „num1“ за по-лесно справяне. След това актуализирайте съдържанието с номер "01".
Настройки за дизайн за номер
В раздела за дизайн актуализирайте следното:
- Текстов шрифт: Prata
- Цвят на текста на текста: # 8ab2d3
- Размер на текста на текста: 70px
- Разстояние между текстовите букви: 4px
- Височина на текстовата линия: 1.5ем
- Подложка: 20px вляво
ЗАБЕЛЕЖКА: Числата имат размер на текста 70px и височина на реда 1.5em, което означава, че общата височина на текстовия модул ще бъде близка до 100px. Това е важно да се има предвид, когато започнем да добавяме вертикални компенсации на движение. Например, добавянето на вертикално отместване от „1“ към текстовия модул ще премести текстовия модул точно 100 px, което е височината на текстовия модул.
Ефекти на превъртане за първо число
Добавете следните ефекти на превъртане към текстовия модул.
В раздела за вертикално движение актуализирайте следното:
- Активиране на вертикалното движение: ДА
- Стартово изместване: 1 (при 10%)
- Средно компенсиране: 0 (при 20%)
- Крайна компенсация: -1 (при 30%)
В раздела „Fade In“ и „Fade Out“ актуализирайте следното:
- Активирайте избледняване и изчезване: ДА
- Първоначална непрозрачност: 0% (при 10%)
- Средна непрозрачност: 100% (при 20%)
- Крайна непрозрачност: 0% (до 30%)
Уверете се, че сте задали спусъка за ефект на движение в горната част на елемента:
- Спусък на ефекта на движение: горната част на елемента
Създайте текстовия модул за второто число
Дублирайте първото число
След като първият брой е създаден, дублирайте го, за да създадете текстовия модул за втория брой. След това актуализирайте етикета в изгледа на слоевете за по-лесна справка.
Актуализирайте номер / съдържание
Отворете параметрите на втория цифров текстов модул и актуализирайте съдържанието с числото "02".
Актуализирайте позицията
След това актуализирайте опциите за позицията, както следва:
- Позиция: Абсолютна
- Вертикално изместване: 126px
Актуализирайте ефектите на превъртане
След това актуализирайте ефектите на превъртане, както следва:
В раздела „Вертикално движение“ актуализирайте следното:
- Стартово изместване: 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
- Ширина на горната граница: 5px
В раздела „Разширени“ актуализирайте следните елементи:
- Деактивирайте на: телефон и таблет
- Позиция: Абсолютна
- Местоположение: долу вляво
ВАЖНО: Пространството, което ще заема разделителят, беше създадено по-рано чрез добавяне на 100 пиксела отстъп към колоната. Ако не добавите това отстъпване, разделителят ще се припокрива с числата.
Създаване на допълнителни броячи и колони
Дублирайте колона 1 и актуализирайте съдържанието
За да създадете нов брояч, дублирайте колона 1. Това ще създаде втора колона с всички елементи на място автоматично.
Тогава всичко, което трябва да направите, е да актуализирате съдържанието на всички текстови модули с нови текстове и числа.
Дублирайте колона 2 и актуализирайте съдържанието
След като съдържанието на всички текстови модули в колона 2 бъде актуализирано, дублирайте колона 2, за да създадете трети брояч за годината. След това актуализирайте съдържанието на всеки текстов модул, ако е необходимо.
Краен резултат
Ето и крайния резултат.
Други ресурси
- Как да използвате модула за броене на числа в Divi
- Как да използвате модула за кръгов брояч на Divi
- Как да създадете анимирани кръгли броячи в Divi
Заключителни мисли
Това опростено оформление с анимирани, скролиращи броячи би трябвало да е полезно за показване на числови данни по нов и уникален начин. Чувствайте се свободни да се откажете от концепцията за дати и да използвате броячите за всичко, което можете да си представите!