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.
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.
Ď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
Potom otvorte nastavenia linky a aktualizujte nasledujúce:
- Šírka odkvapov: 1
- Šírka: 100%
- Maximálna šírka: 1200 pixlov
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í.
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
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
Aktualizujte parametre návrhu nasledovne:
- Šírka: 250px
- Výška: 250px
- Okraj: 25 pixelov hore, 25 pixelov dole, 25 pixlov vľavo
- Zaoblené rohy: 50%
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“.
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%
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
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
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)
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.
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%
Teraz dajte modulu absolútnu pozíciu nasledovne:
- Poloha: absolútna
- Vertikálne odsadenie: 25 px
- Horizontálne odsadenie: 25 pixlov
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“.
Otvorte nastavenia modulu oddelenia predného kruhu a aktualizujte nasledujúce informácie:
- Farba pozadia: #ffffff
- Šírka: 200px
- Výška: 200px
Potom pridajte absolútnu pozíciu nasledovne:
- Poloha: absolútna
- Vertikálne odsadenie: 50 px
- Horizontálne odsadenie: 50 px
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.
V poli Vrstvy pomenujte nový textový modul „num1“. Potom otvorte nastavenia a aktualizujte text tak, aby čítal „25%“.
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
- Šírka: 200px
- Výška: 200px
- Zaoblené rohy: 50%
- Výplň: nad 75px
- Poloha: absolútna
- Vertikálne odsadenie: 50 px
- Horizontálne odsadenie: 50 px
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)
To je všetko pre kruhový meter. Objavte výsledok.
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ý.