Анимираните броячи на числа са популярни в мрежата като начин за показване на числа. données за подчертаване на стойността на услугите, казуси и др. Divi има специален модул за брояч на числа, който може да се използва за лесно генериране на анимирани броячи на числа.
В този урок обаче ще ви покажем как да създавате числови броячи, които анимират при превъртане, използвайки Divi. Използване на опциите за позиция и ефектите на превъртане на Divi, ще проектираме просто оформление за показване на дата с превъртащи се числа.
Част 1: Създаване на заглавния раздел
В тази първа част ще създадем просто заглавие за оформлението.
Първо, добавете ред от една колона към раздела.
След това добавете нов текстов модул към реда.
Актуализирайте съдържание на текстовия модул със следните елементи:
Запишете датата
След това актуализирайте стила на заглавния текст, както следва:
- Заглавие 2 Шрифт: Prata
- Елемент 2 Размер на текста: 130px (десктоп), 70px (таблет), 40px (телефон)
Част 2: Създаване на броячи със превъртаща се анимация
В тази следваща част ще създадем трите брояча, които ще анимират превъртащите се числа, докато те спрат да показват дата (месец, ден и година). Всеки брояч ще бъде изграден, като се използват общо 5 текстови модула и разделител. Първият текстов модул ще служи като етикет на брояча (т.е. месец, ден, година). Следващите четири текстови модула ще съдържат различен номер (в процес на изпълнение), който ще бъде анимиран при превъртане, използвайки отместванията на вертикалното движение в 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
Заключителни мисли
Това просто оформление с превъртащи се анимирани броячи на числа трябва да е полезно за показване données дигитално по нов и уникален начин. Чувствайте се свободни да се откажете от концепцията за дати и да използвате броячите за всичко, за което можете да мечтаете!