Come progettare un orologio animato con gli effetti di scorrimento di Divi
Pubblicato: 2020-07-20Il web è pieno di siti che necessitano di accenti di design legati al tempo (ottimizzazione della velocità, eventi imminenti, ecc.). Nella maggior parte dei casi, un'icona a forma di orologio o un grafico può funzionare alla grande. Ma creare un design animato di un orologio darà sicuramente un "giro" unico al design del tuo sito web.
Con tutte le opzioni di design integrate disponibili in Divi, possiamo creare da zero un fantastico design animato di un orologio. In questo tutorial, creeremo un orologio animato che farà girare le lancette dell'orologio mentre l'utente scorre la pagina.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Scarica GRATUITAMENTE il layout dell'orologio animato
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Parte 1: Progettazione del quadrante dell'orologio
Per iniziare, aggiungi una riga a una colonna alla sezione normale.
Impostazioni riga
Prima di aggiungere qualsiasi modulo, apri le impostazioni della riga e aggiorna quanto segue:
- Colore di sfondo: #003a5c
Nella scheda Progettazione, aggiorna quanto segue:
- Larghezza grondaia: 1
- Larghezza: 50vw
- Larghezza massima: 500 px
- Altezza: 50vw
- Altezza massima: 500 px
- Angoli Arrotondati: 50%
- Larghezza bordo: 15 px
- Colore bordo: #ffffff
- Box Shadow: vedi screenshot
- Posizione verticale dell'ombra del riquadro: 0px
- Forza sfocatura ombra scatola: 68 px
- Colore ombra: rgba(0,0,0,0.22)
Nella scheda Avanzate, aggiorna le opzioni di visibilità come segue:
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Parte 2: Aggiunta degli indicatori delle ore
Una volta che la riga è stata progettata come quadrante dell'orologio, siamo pronti per aggiungere gli indici delle ore che rappresentano le dodici, le tre, le sei e le nove. Ciascuno dei marker verrà creato utilizzando un modulo divisore.
L'indicatore delle ore 12
Inizia aggiungendo un nuovo modulo divisore all'interno della riga.
Quindi aggiorna il colore di sfondo come segue:
- Colore di sfondo: #78acf4
- Larghezza: 10vw
- Larghezza massima: 150 px
- Altezza: 3px
- Angoli arrotondati: 8px
- Trasforma Ruota Asse Z: 90 gradi
Nella scheda Avanzate, assegna al divisore una posizione assoluta:
- Posizione: Assoluta
- Posizione: in alto al centro
L'indicatore delle ore 6
Per creare l'indicatore delle 3, duplica il divisore utilizzato per creare l'indicatore delle 12. (A questo punto è una buona idea etichettare i moduli all'interno del modale Livelli.) Quindi aprire il divisore duplicato e aggiornare la posizione della posizione come segue:
- Posizione: in basso al centro
L'indicatore delle 3 in punto
Per creare l'indicatore delle 3, duplica l'indicatore delle 6. Quindi apri le impostazioni per il nuovo duplicato (assicurati di etichettarlo "ore 3") e modifica quanto segue:
- Posizione: centro destra
Quindi aggiorna le opzioni di trasformazione come segue:
Nella scheda di traduzione...
- Trasforma Trasla asse X: 50%
Nella scheda Rotazione
- Trasforma Ruota Asse Z: 0deg
L'indicatore delle 9
Per creare l'indicatore delle 3, duplica l'indicatore delle 6. Quindi apri le impostazioni per il nuovo duplicato (assicurati di etichettarlo "ore 9") e modifica quanto segue:
- Posizione: centro sinistra
Quindi aggiorna le opzioni di trasformazione come segue:
Nella scheda di traduzione...
- Trasforma Trasla asse X: -50%
Parte 3: Creazione delle lancette dell'orologio (secondi, minuti e ore)
Una volta posizionati gli indici delle ore, siamo pronti per iniziare a creare le lancette dell'orologio. Inizieremo con la lancetta dei secondi.
La seconda mano
Per creare la lancetta dei secondi, duplica il divisore delle 12 e trascinalo sotto il resto dei divisori nella colonna utilizzando il modale Livelli.
Quindi etichetta il nuovo duplicato "secondo".
Apri le impostazioni del modulo e aggiorna la posizione nella scheda Avanzate:
- Posizione: centro centro
Nella scheda Design, aggiorna le dimensioni come segue:
- Larghezza: 20vw
- Larghezza massima: 200 px
- Altezza: 0,5 vw
- Altezza massima: 7.5px
Ora la lancetta dei secondi è al centro del quadrante dell'orologio, ma vogliamo che la parte inferiore della lancetta dei secondi inizi al centro come farebbe una normale lancetta dell'orologio. Quindi vogliamo che la parte inferiore della lancetta rimanga al centro come origine di rotazione in modo che la lancetta possa ruotare come farebbe su un vero orologio. Per fare ciò dovremo utilizzare una combinazione di opzioni di trasformazione per posizionare e ruotare il divisore da una specifica origine di trasformazione.
Aggiorna quanto segue:
Nella scheda di traduzione...
- Transform Translate X Axis: 0% (questo è un passaggio importante)
Nella scheda Rotazione...
- Trasforma Ruota Asse Z: -90deg
Nella scheda Origine...
- Trasforma Origine: Centro Sinistra
Poiché questa mano si muoverà molto velocemente una volta aggiunto l'effetto di scorrimento, diamogli un colore di sfondo semitrasparente in modo che non distragga troppo.
- Colore di sfondo: rgba (175,175,175,0.12)
La lancetta dei minuti
Per creare la lancetta dei minuti, duplica il modulo della lancetta dei secondi ed etichetta il duplicato "minuto". Quindi apri il nuovo modulo divisore e aggiorna il colore di sfondo:
- Colore di sfondo sfumato a sinistra: #78acf4
- Colore di sfondo sfumato a destra: #b0b9ff
- Direzione gradiente: 90 gradi
Quindi aggiorna il design come segue:
- Larghezza: 15w
- Larghezza massima: 150 px
- Altezza: 1vw
- Altezza massima: 15px
La lancetta delle ore
Una volta completata la lancetta dei minuti, duplica il modulo Lancetta dei secondi ed etichetta il duplicato "ora". Quindi apri il nuovo modulo divisore e aggiorna il colore di sfondo come segue:
- Colore di sfondo: #ffffff
Quindi aggiorna le dimensioni nella scheda Design come segue:
- Larghezza: 10vw
- Larghezza massima: 100 px
A questo punto, avrai tutte e tre le lancette dell'orologio pronte per gli effetti di scorrimento!
Parte 4: aggiunta di effetti di scorrimento di rotazione a ciascuna lancetta dell'orologio
Per ruotare le lancette dell'orologio, aggiungeremo l'effetto di scorrimento della rotazione a ciascuna delle tre lancette dell'orologio. Poiché stiamo lavorando con un design di orologio, è importante ricordare che possiamo usare i gradi di rotazione su ciascuna lancetta dell'orologio per rappresentare l'ora reale. Ad esempio, la rotazione della lancetta delle ore di 30 gradi rappresenterebbe l'1, di 60 gradi le 2 e così via.
Effetto di scorrimento della rotazione della lancetta delle ore
Innanzitutto, aggiungeremo un effetto di scorrimento della rotazione alla lancetta delle ore. Apri le impostazioni del divisore della lancetta delle ore e aggiungi il seguente effetto di trasformazione:
Sotto la scheda di rotazione...
- Abilita rotazione: SI
- Rotazione iniziale: 0 gradi (al 10%)
- Rotazione media: 15° (al 50%)
- Rotazione finale: 30 gradi (al 90%)
Effetto di scorrimento della rotazione della lancetta dei minuti
Successivamente, aggiungeremo un effetto di scorrimento della rotazione alla lancetta dei minuti. Apri le impostazioni del divisore della lancetta dei minuti e aggiungi il seguente effetto di trasformazione:
Sotto la scheda di rotazione...
- Abilita rotazione: SI
- Rotazione iniziale: 0 gradi (al 10%)
- Rotazione media: 180 gradi (al 50%)
- Rotazione finale: 360 gradi (al 90%)
Effetto di scorrimento della rotazione della lancetta dei secondi
Successivamente, aggiungeremo un effetto di scorrimento della rotazione alla lancetta dei secondi. Apri le impostazioni del divisore dei secondi e aggiungi il seguente effetto di trasformazione:
Sotto la scheda di rotazione...
- Abilita rotazione: SI
- Rotazione iniziale: 0 gradi (al 10%)
- Rotazione media: 5400 gradi (al 50%)
- Rotazione finale: 10800 gradi (al 90%)
NOTA: una rotazione accurata affinché la lancetta dei secondi raggiunga 1 ora richiederebbe una rotazione di 21600 gradi. Ma dal momento che è troppo veloce, ho pensato che fosse meglio tagliarlo a metà. Dopotutto, questo è per scopi di progettazione.
Risultati finali
Ecco il disegno definitivo.
E questo è il risultato finale degli effetti di scorrimento. Nota come il tempo passa esattamente un'ora quando scorri la pagina.
Pensieri finali
È piuttosto sorprendente che possiamo realizzare un design dell'orologio come questo con effetti di scorrimento che rappresentano il tempo in modo così accurato. Sentiti libero di sperimentare con l'aggiunta di più effetti di scorrimento di rotazione per accelerare e rallentare il tempo sull'orologio durante lo scorrimento. Inoltre puoi utilizzare questo design dell'orologio per accentuare molti CTA o intestazioni.
Non vedo l'ora di sentirti nei commenti.
Saluti!