[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: #f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3 / 4" css = ". vxXXXXUM ! important; border-bottom-width: 1502759058885px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: il tema WordPress più semplice da usare

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62.

I contatori circolari animati sono un modo popolare per presentare informazioni (come statistiche o metriche) su una pagina Web con un'interazione divertente. In effetti, potresti già avere familiarità con il modulo contatore circolare di Divi, che rende l'aggiunta di contatori circolari al tuo sito Divi semplice e veloce. 

Tuttavia, in questo tutorial, ti mostreremo come creare contatori di cerchi completamente personalizzati che si animano mentre scorri! Non avremo bisogno di alcun CSS personalizzato esterno per crearli. Il trucco è sfruttare la funzione Layers di Divi per gestire più moduli sovrapposti e animati con precisione.

Possibile risultato

Ecco una rapida panoramica dei divisori circolari animati che creeremo in questo tutorial.

contatori di cerchi animati su scroll

Creazione di quattro contatori circolari che si animano durante lo scorrimento con Divi

Configurazione di sezione e linea

Innanzitutto, aggiungi una riga di quattro colonne alla sezione predefinita.

contatori di cerchi animati su scroll

Successivamente, apri le impostazioni della sezione e aggiungi un margine superiore e inferiore in modo da avere spazio sufficiente per testare gli effetti di scorrimento dei contatori circolari che creeremo.

  • Margine: 85 vh alto, 85 vh basso
contatori di cerchi animati su scroll

Quindi aprire le impostazioni della linea e aggiornare quanto segue:

  • Larghezza della grondaia: 1
  • Larghezza: 100%
  • Larghezza massima: 1200 px
contatori di cerchi animati su scroll

Utilizzo della vista Livelli

Prima di iniziare a creare i contatori del cerchio animato, assicurati di distribuire la funzione Livelli Divi. Puoi farlo facendo clic sull'icona dei livelli grigi nel menu delle impostazioni in basso.

contatori di cerchi animati su scroll

Poiché creeremo molti elementi (o livelli) sovrapposti, la casella dei livelli sarà sicuramente utile per gestire i nostri livelli in futuro.

Creazione del contatore di cerchi animati n. 1 (25%)

Questo primo contatore del cerchio animato animerà fino al 25% del cerchio sulla pergamena e avrà la percentuale di testo corrispondente al centro che si fonderà con la pergamena. Per costruire il design del contatore circolare completo utilizzeremo diversi divisori e moduli di testo sovrapposti. Ecco come farlo.

Il cerchio posteriore

Per creare il cerchio posteriore useremo un modulo separatore che modelleremo come un cerchio e gli daremo un colore di sfondo.

Aggiungi un modulo di separazione
contatori di cerchi animati su scroll

Sollevare il divisore nella visualizzazione dei livelli e modificare l'etichetta in "backcircle". Quindi aprire le impostazioni del modulo separatore e aggiornare quanto segue:

  • Mostra divisore: NO
  • Colore di sfondo: # c3e0e5
contatori di cerchi animati su scroll

Aggiorna i parametri di progettazione come segue:

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare Facile e gratuito qualsiasi sito web o blog design con un aspetto professionale. Smetti di pagare molto per un sito web che puoi fare da solo.

  • Larghezza: 250 px
  • Altezza: 250px
  • Margine: 25 pixel in alto, 25 pixel in basso, 25 pixel a sinistra
  • Angoli arrotondati: 50%
contatori di cerchi animati su scroll

La barra dei colori rotante

La parte successiva del contatore circolare sarà la barra dei colori rotante. Duplica il separatore precedente (cerchio posteriore) per rilanciare il disegno. Quindi aggiorna il nuovo separatore con l'etichetta "colorbar".

contatori di cerchi animati su scroll

Per creare l'effetto barra dei colori rotante, dobbiamo trasformare questo divisore in un semicerchio con il colore che vogliamo utilizzare per la barra.

Aprire le impostazioni del separatore della barra dei colori e aggiornare quanto segue:

  • Colore di sfondo: nessuno
  • Sfondo sfumato colore sinistro: # 121b55
  • Colore di sfondo sfumato a destra: rgba (255,255,255,0)
  • Direzione gradiente: 90 gradi
  • Posizione iniziale: 50%
  • Posizione finale: 0%
contatori di cerchi animati su scroll

Su alcuni browser è presente un piccolo problema di sovrapposizione che mostra colori indesiderati attraverso i livelli. Per evitare ciò, renderemo questo semicerchio leggermente più piccolo e regoleremo l'offset di conseguenza.

  • Larghezza: 248px
  • Altezza: 248px
contatori di cerchi animati su scroll

Per fare in modo che il cerchio della barra dei colori si sovrapponga al cerchio posteriore, assegnare al divisore una posizione assoluta come segue:

  • Posizione: assoluta
  • Offset verticale: 26 pixel
  • Offset orizzontale: 26 pixel
contatori di cerchi animati su scroll

Quindi aggiungi il seguente effetto di scorrimento per ruotare la barra circolare di 90 gradi (o il 25% del cerchio).

Nella scheda Effetti Rotary ...

  • Rotazione iniziale: 0 gradi (al 15% della finestra)
  • Rotazione media: 90 gradi (al 20% -25% del viewport)
  • Fine rotazione: 90 gradi (al 30% del viewport)
contatori di cerchi animati su scroll

Vuoi vendere i tuoi prodotti su Internet?

Scarica WooCommerce gratis, i migliori plugin di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress e creare facilmente il tuo negozio online. Perfetto per i principianti.

Le percentuali e i valori di rotazione qui potrebbero non sembrare completamente sensati a questo punto. Rendiamo più semplice aggiornare la rotazione in un secondo momento quando costruiamo il contatore del cerchio successivo che termina a 180 gradi (50% del cerchio). L'importante a questo punto è che la rotazione termini a 90 gradi (o 25%).

Lo scudo

L'elemento successivo del nostro contatore circolare è quello che chiamo lo scudo, che è un altro semicerchio che nasconde il lato sinistro del cerchio della barra dei colori mentre gira.

 Per creare lo scudo, duplica il primo modulo separatore Back Circle che abbiamo creato in precedenza. Quindi trascinalo sotto il modulo separatore "Barra dei colori" e aggiorna l'etichetta su "scudo" per un facile riferimento.

contatori di cerchi animati su scroll

Apri le impostazioni del divisore scudo e aggiorna quanto segue:

  • Colore di sfondo: nessuno
  • Colore sfondo sfumato sinistro: # c3e0e5 (uguale al cerchio posteriore)
  • Colore di sfondo sfumato a destra: rgba (255,255,255,0)
  • Direzione gradiente: 90 gradi
  • Posizione iniziale: 50%
  • Posizione finale: 0%
contatori di cerchi animati su scroll

Ora assegna al modulo una posizione assoluta come segue:

  • Posizione: assoluta
  • Offset verticale: 25px
  • Offset orizzontale: 25 pixel
contatori di cerchi animati su scroll

Il cerchio anteriore

La parte successiva del contatore del cerchio è il cerchio anteriore, che nasconderà la parte centrale degli strati precedenti ed esporrà il bordo esterno.

Per crearlo, duplica il divisore circolare posteriore, rilascialo sotto il modulo divisore scudo e aggiorna l'etichetta in "cerchio anteriore".

contatori di cerchi animati su scroll

Aprire le impostazioni del modulo di separazione del cerchio anteriore e aggiornare quanto segue:

  • Colore di sfondo: #ffffff
  • Larghezza: 200px
  • Altezza: 200px
contatori di cerchi animati su scroll

Quindi aggiungere la posizione assoluta come segue:

  • Posizione: assoluta
  • Offset verticale: 50px
  • Offset orizzontale: 50 px
contatori di cerchi animati su scroll

Il numero di scolorimento

L'ultimo pezzo di questo primo contatore del cerchio è il numero di scolorimento che corrisponde al valore indicato dalla barra rotante.

Per crearlo, aggiungi un nuovo modulo di testo sotto il modulo di separazione del cerchio anteriore.

contatori di cerchi animati su scroll

Nella casella Livelli, denomina il nuovo modulo di testo "num1". Quindi apri le impostazioni e aggiorna il corpo per leggere "25%".

contatori di cerchi animati su scroll

Sotto le impostazioni di progettazione, aggiorna quanto segue:

  • Carattere del testo: grassetto
  • Dimensione del testo: 25px
  • Altezza della riga di testo: 2em
  • Allineamento del testo: centro
contatori di cerchi animati su scroll
  • Larghezza: 200px
  • Altezza: 200px
  • Angoli arrotondati: 50%
contatori di cerchi animati su scroll
  • Imbottitura: sopra 75px
  • Posizione: assoluta
  • Offset verticale: 50px
  • Offset orizzontale: 50 px
contatori di cerchi animati su scroll

Ora il testo dovrebbe essere perfettamente centrato nel contatore del cerchio.

Per aggiungere l'effetto dissolvenza, aggiorna i seguenti effetti di scorrimento:

Nella scheda Fade In e Fade Out ...

  • Attiva dissolvenza in entrata e in uscita: SÌ
  • Opacità iniziale: 0% (al 10% della finestra)
  • Opacità media: 100% (al 20% della finestra)
  • Fine opacità: 100% (al 100% del viewport)
contatori di cerchi animati su scroll

Questo è tutto per il metro circolare. Scopri il risultato.

contatori di cerchi animati su scroll

Tutto quello che devi fare ora è duplicare quello che abbiamo fatto finora sulle altre colonne e modificare i diversi valori per rendere unico il contatore.

1 azioni
quota1
Tweet
Enregistrer