Animované počítadlá kruhov sú obľúbeným spôsobom prezentácie informácií (napr štatistika alebo metriky) na webovej stránke so zábavnou interakciou. V skutočnosti už možno poznáte modul počítadla kruhov z divi, ktorá vám umožňuje pridať počítadlá kruhov na vašu stránku divi rýchlo a jednoducho. 

V tomto návode vám však ukážeme, ako vytvoriť úplne vlastné počítadlá kruhov, ktoré sa animujú pri posúvaní! Na ich vytvorenie nebudeme potrebovať žiadne externé vlastné CSS. Trik je využiť funkciu Vrstvy divi na precízne spravovanie niekoľkých modulov prekrývajúcich sa a animovaných.

Možný výsledok

Tu je rýchly prehľad animovaných oddeľovačov kruhu, ktoré vytvoríme v tomto návode.

animované počítadlá krúžkov pri posúvaní

Vytvorenie štyroch počítadiel kruhov, ktoré ožívajú pri rolovaní pomocou Divi

Konfigurácia prierezu a vedenia

Najskôr do predvolenej sekcie pridajte riadok so štyrmi stĺpcami.

animované počítadlá krúžkov pri posúvaní

Ďalej otvorte nastavenia sekcie a pridajte horný a dolný okraj, aby sme mali dostatok miesta na testovanie efektov posúvania počítadiel kruhov, ktoré sa chystáme vytvoriť.

  • Marža: vysoká 85 h, nízka 85 h
animované počítadlá krúžkov pri posúvaní

Potom otvorte nastavenia linky a aktualizujte nasledujúce:

  • Šírka odkvapov: 1
  • Šírka: 100%
  • Maximálna šírka: 1200 pixlov
animované počítadlá krúžkov pri posúvaní

Použitie zobrazenia Vrstvy

Predtým, ako začnete vytvárať počítadlá animovaných kruhov, nezabudnite nasadiť funkciu Divi Layers. Môžete to urobiť kliknutím na ikonu sivých vrstiev v dolnej ponuke nastavení.

animované počítadlá krúžkov pri posúvaní

Pretože budeme vytvárať veľa prekrývajúcich sa prvkov (alebo vrstiev), políčko vrstiev sa v budúcnosti bude určite hodiť na správu našich vrstiev.

Vytvorenie počítadla animovaných kruhov # 1 (25%)

Toto prvé počítadlo animovaného kruhu bude animovať až 25% kruhu na zvitku a bude mať percentuálny text zodpovedajúci stredu, ktorý bude splývať do zvitku. Aby sme vytvorili kompletný dizajn počítadla kruhov, budeme používať niekoľko prekrývajúcich sa oddeľovačov textu a modulov. Tu je postup, ako na to.

Zadný kruh

Na vytvorenie zadného kruhu použijeme oddeľovací modul, ktorý vytvarujeme ako kruh a dáme mu farbu pozadia.

Pridajte separačný modul
animované počítadlá krúžkov pri posúvaní

Vytiahnite oddeľovač v zobrazení vrstiev a zmeňte štítok na „kruhový kruh“. Potom otvorte nastavenia separačného modulu a aktualizujte nasledovné:

  • Zobraziť delič: NIE
  • Farba pozadia: # c3e0e5
animované počítadlá krúžkov pri posúvaní

Aktualizujte parametre návrhu nasledovne:

  • Šírka: 250px
  • Výška: 250px
  • Okraj: 25 pixelov hore, 25 pixelov dole, 25 pixlov vľavo
  • Zaoblené rohy: 50%
animované počítadlá krúžkov pri posúvaní

Rotujúci farebný pruh

Ďalšou časťou počítadla kruhov bude rotujúca farebná lišta. Duplikujte predchádzajúci oddeľovač (zadný kruh), aby sa dizajn znova spustil. Potom aktualizujte nový oddeľovač štítkom „farebná lišta“.

animované počítadlá krúžkov pri posúvaní

Aby sme vytvorili efekt rotujúcej farebnej lišty, musíme tento rozdeľovač zmeniť na polkruh s farbou, ktorú chceme pre lištu použiť.

Otvorte nastavenia oddeľovača farebných pruhov a aktualizujte nasledujúce informácie:

  • Farba pozadia: žiadna
  • Ľavé farebné gradientné pozadie: # 121b55
  • Pravá farba pozadia prechodu: rgba (255,255,255,0 XNUMX XNUMX)
  • Smer sklonu: 90 °
  • Východisková pozícia: 50%
  • Konečná poloha: 0%
animované počítadlá krúžkov pri posúvaní

V niektorých prehliadačoch sa vyskytuje malý problém s prekrývaním, ktorý zobrazuje nežiaducu farbu vo vrstvách. Aby sme sa tomu vyhli, urobíme tento polkruh o niečo menší a podľa toho upravíme posun.

  • Šírka: 248px
  • Výška: 248px
animované počítadlá krúžkov pri posúvaní

Ak chcete, aby sa kruh farebnej lišty prekrýval so zadným kruhom, dajte prepážke absolútnu polohu nasledovne:

  • Poloha: absolútna
  • Zvislé odsadenie: 26 pixlov
  • Horizontálne odsadenie: 26 pixlov
animované počítadlá krúžkov pri posúvaní

Potom pridajte nasledujúci efekt posúvania a otočte kruhovú lištu o 90 stupňov (alebo 25% kruhu).

Na karte Rotary Effects ...

  • Začiatočná rotácia: 0deg (na 15% okna)
  • Priemerná rotácia: 90 stupňov (pri 20% - 25% výrezu)
  • Koniec rotácie: 90 stupňov (pri 30% výrezu)
animované počítadlá krúžkov pri posúvaní

Zdá sa, že tu uvedené percentuálne hodnoty a hodnoty rotácie nemajú v tomto okamihu úplný zmysel. Uľahčíme si aktualizáciu rotácie neskôr, keď vytvoríme ďalšie počítadlo kruhov, ktoré končí na 180 stupňov (50% kruhu). Dôležité v tomto bode je, že rotácia končí pri 90 stupňoch (alebo 25%).

Štít

Ďalším prvkom nášho počítadla kruhov je to, čo nazývam štít, čo je ďalší polkruh, ktorý pri otáčaní skrýva ľavú stranu kruhu farebných pruhov.

 Ak chcete vytvoriť štít, duplikujte prvý modul rozdeľovača zadného kruhu, ktorý sme vytvorili predtým. Potom ho presuňte pod separačný modul „Farebná lišta“ a aktualizujte štítok na „štít“ pre ľahšiu orientáciu.

animované počítadlá krúžkov pri posúvaní

Otvorte nastavenie oddeľovača štítu a aktualizujte nasledujúce informácie:

  • Farba pozadia: žiadna
  • Farba pozadia vľavo: # c3e0e5 (rovnaké ako zadný kruh)
  • Pravá farba pozadia prechodu: rgba (255,255,255,0 XNUMX XNUMX)
  • Smer sklonu: 90 °
  • Východisková pozícia: 50%
  • Konečná poloha: 0%
animované počítadlá krúžkov pri posúvaní

Teraz dajte modulu absolútnu pozíciu nasledovne:

  • Poloha: absolútna
  • Vertikálne odsadenie: 25 px
  • Horizontálne odsadenie: 25 pixlov
animované počítadlá krúžkov pri posúvaní

Predný kruh

Ďalšou časťou počítadla kruhu je predný kruh, ktorý skryje strednú časť predchádzajúcich vrstiev a odkryje vonkajší okraj.

Ak ho chcete vytvoriť, duplikujte zadný rozdeľovač kruhu, umiestnite ho pod modul rozdeľovača štítu a aktualizujte štítok na „predný kruh“.

animované počítadlá krúžkov pri posúvaní

Otvorte nastavenia modulu oddelenia predného kruhu a aktualizujte nasledujúce informácie:

  • Farba pozadia: #ffffff
  • Šírka: 200px
  • Výška: 200px
animované počítadlá krúžkov pri posúvaní

Potom pridajte absolútnu pozíciu nasledovne:

  • Poloha: absolútna
  • Vertikálne odsadenie: 50 px
  • Horizontálne odsadenie: 50 px
animované počítadlá krúžkov pri posúvaní

Počet sfarbení

Posledným kusom tohto počítadla prvého kruhu je počet sfarbení, ktorý zodpovedá hodnote označenej otočným pruhom.

Ak ho chcete zostaviť, pridajte nový modul pod modul na oddelenie predného kruhu.

animované počítadlá krúžkov pri posúvaní

V poli Vrstvy pomenujte nový textový modul „num1“. Potom otvorte nastavenia a aktualizujte text tak, aby čítal „25%“.

animované počítadlá krúžkov pri posúvaní

Podľa nastavení dizajnu aktualizujte nasledujúce informácie:

  • Váha písma textu: tučne
  • Veľkosť textu: 25px
  • Výška riadku textu: 2em
  • Zarovnanie textu: stred
animované počítadlá krúžkov pri posúvaní
  • Šírka: 200px
  • Výška: 200px
  • Zaoblené rohy: 50%
animované počítadlá krúžkov pri posúvaní
  • Výplň: nad 75px
  • Poloha: absolútna
  • Vertikálne odsadenie: 50 px
  • Horizontálne odsadenie: 50 px
animované počítadlá krúžkov pri posúvaní

Teraz by mal byť text v strede počítadla dokonale vycentrovaný.

Ak chcete pridať efekt slabnutia, aktualizujte nasledujúce efekty rolovania:

Pod kartou Fade In a Fade Out ...

  • Aktivujte zoslabovanie a vypínanie: ÁNO
  • Počiatočná nepriehľadnosť: 0% (pri 10% okna)
  • Priemerná nepriehľadnosť: 100% (pri 20% okna)
  • Koncová nepriehľadnosť: 100% (pri 100% výrezu)
animované počítadlá krúžkov pri posúvaní

To je všetko pre kruhový meter. Objavte výsledok.

animované počítadlá krúžkov pri posúvaní

Všetko, čo musíte urobiť, je duplikovať to, čo sme doteraz urobili v ostatných stĺpcoch, a upraviť rôzne hodnoty tak, aby bol počítadlo jedinečný.