Come aggiungere animazioni a sezioni/righe

C'era una volta su Internet, l'aggiunta di animazioni al tuo sito era un compito ingombrante e in qualche modo specializzato. Divi, tuttavia, possiede potenti strumenti di animazione ed effetti di scorrimento che puoi implementare senza bisogno di molte competenze tecniche. Chiunque può aggiungere questi effetti ai propri siti con il minimo sforzo. Sebbene i processi di questo tutorial possano essere applicati a qualsiasi elemento all'interno di Divi, oggi ci concentreremo su sezioni e righe per ottenere effetti specifici utilizzando quelli. Scaviamo con le animazioni!

Anteprima

Desktop

Mobile

Carica Divi Builder in una pagina o post

La prima cosa che devi fare è entrare in Divi Builder. Sia che tu scelga uno dei nostri pacchetti di layout (per questo articolo utilizzeremo il pacchetto di layout del club di tennis) o un tuo design, tutti i passaggi si svolgono all'interno delle impostazioni di sezione e riga .

Con questo design, animeremo 1 sezione e 3 righe per ottenere un effetto di caricamento sequenziale.

Scegli un layout predefinito

Per applicare uno dei nostri pacchetti di layout dal design professionale, accedi a Divi Builder e seleziona Usa un layout predefinito . Questo farà apparire l'elenco di tutti gli omaggi che offriamo.

Scegli un layout

Quindi, scegli semplicemente quale pacchetto di layout desideri utilizzare. Puoi ordinare per categoria o cercare parole chiave per vedere cosa abbiamo creato per te.

Individua le sezioni e le righe da animare

Quando il layout ha importato tutte le risorse e la pagina è stata caricata, vorrai trovare la sezione e le righe a cui vuoi aggiungere le animazioni. Ricorda, le sezioni sono codificate in blu in Divi Builder e le righe sono verdi .

Con quello mappato, passiamo ad aggiungere quelle animazioni!

Come aggiungere animazioni a sezioni e righe - Opzione 1

Aggiungere un'animazione a una sezione Divi è molto semplice. Devi prima inserire le impostazioni della sezione . Quindi, vai alla scheda Design e scorri fino a visualizzare le opzioni di animazione .

Sotto le Opzioni di animazione , regolerai fino a 8 diverse opzioni per l'animazione scelta.

1. Stili di animazione è dove scegli come appare l'animazione. Se la sezione rotola all'estremità o rimbalza dal lato della pagina come una palla. I più comuni sono Fade e Slide .
2. Direzione : imposterai la direzione verso la quale si muoverà l'elemento. Un valore su significa che la sezione inizierà dal basso e si sposterà verso l'alto. Up non è il punto di origine.
3. Durata : quanto dura l'animazione dall'inizio alla fine. Un valore più basso lo accelererà e uno più alto lo rallenterà.
4. Ritardo : questa opzione impedisce all'animazione di attivarsi il prima possibile e può aiutare a richiamare l'attenzione su di essa più che se si attivasse immediatamente.
5. Intensità : più basso è il valore, più fluida dell'animazione, mentre i valori più alti sono più scattanti e più aggressivi.
6. Opacità iniziale : un valore pari a 0 farà sì che l'animazione inizi in modo invisibile e venga messa a fuoco per tutta la durata. 100 significa che l'elemento è completamente visibile anche prima dell'inizio dell'animazione.
7. Curva di velocità : questo ti consentirà di regolare la fluidità dell'inizio e della fine dell'animazione.
8. Ripeti : la tua animazione è un effetto una tantum o è qualcosa che vuoi ripetere più e più volte? Se un'animazione è impostata su Once , la pagina deve essere ricaricata per avviarla di nuovo.

Come aggiungere animazioni a sezioni e righe - Opzione 2

Divi ha anche una funzione chiamata Scroll Effects . Queste sono animazioni che si attivano ogni volta che l'utente fa scorrere la propria finestra sull'elemento. Gli effetti di scorrimento possono essere impostati su qualsiasi elemento e possono essere combinati con le opzioni di animazione menzionate sopra.

Come abilitare gli effetti di scorrimento

Ancora una volta, qualsiasi elemento in Divi può essere impostato per avere gli effetti di scorrimento abilitati, ma oggi abbiamo a che fare con sezioni e righe. Quindi inserisci le impostazioni della sezione , vai alla scheda Avanzate e trova l'intestazione Effetti di scorrimento .

Scegli gli effetti e i trigger

All'interno delle opzioni degli effetti di scorrimento , troverai varie schede per diversi tipi di animazioni che puoi attivare durante lo scorrimento.

• Posizione fissa : se la sezione o la riga si attacca allo schermo dell'utente mentre scorre.
• Effetti di trasformazione : questi sono gli effetti effettivi dell'animazione: movimento orizzontale e verticale, dissolvenza in apertura/chiusura, ridimensionamento delle dimensioni, rotazione e sfocatura.
• Imposta [Funzione] – Sarai in grado di impostare dove l'effetto è più visibile sullo schermo e quando/dove si verifica
• Attivazione effetto movimento : determinerai se l'animazione inizia quando la parte superiore dell'elemento entra nella finestra, il centro dell'elemento o la parte inferiore.

La differenza principale tra queste e l'utilizzo delle opzioni di animazione nella sezione precedente si riduce al fatto che si desidera che l'animazione sia automatizzata o se si desidera che si attivi ogni volta che l'utente esegue un'azione. Puoi combinare le animazioni utilizzando le opzioni Effetti di scorrimento e Animazione, che utilizzeremo per l'effetto del tutorial principale.

Combinazione di animazioni per sezioni e righe

Puoi creare effetti sorprendenti per i tuoi siti combinando varie animazioni da attivare in momenti diversi. Utilizzando l'opzione Ritardo animazione , il tuo sito può animare una serie di sezioni, righe ed elementi in sequenza per ottenere effetti visivi impressionanti.

Per cominciare, imposteremo lo stile di animazione nelle impostazioni della sezione su Diapositiva con la direzione dell'animazione impostata su Su .

Manterremo il resto delle opzioni ai valori predefiniti. Soprattutto il ritardo dell'animazione . Vogliamo che la sezione si attivi quando è in vista.

Impostazioni di animazione per la riga 1

Successivamente, regoleremo la prima riga nella sezione. Andiamo nelle impostazioni della riga , andiamo alle opzioni di animazione nella scheda Progettazione e di nuovo selezioniamo Diapositiva . Questa volta, vogliamo cambiare la direzione su Giù e il Ritardo animazione su 5 00 ms . 1000ms è uguale a 1 secondo, ricorda.

Dato che abbiamo lasciato il timing della sezione a 0 ms per attivarsi immediatamente, vogliamo che la riga sia leggermente sfalsata, consentendo all'animazione iniziale di terminare principalmente prima che inizi questa.

Impostazioni di animazione per la riga 2

Successivamente, andremo nelle impostazioni per la seconda riga della pagina e andremo alle opzioni di animazione . Di nuovo, selezioneremo Diapositiva per lo stile di animazione e questa riga scorrerà verso destra .

Inoltre, imposteremo il Ritardo dell'animazione a 1000 ms , il che significa che questo si attiverà non appena termina la prima animazione.

Impostazioni di animazione per la riga 3

Per la terza riga che stiamo animando, utilizzeremo gli effetti di scorrimento per raggiungere i nostri obiettivi. Poiché la nostra terza riga inizia appena above the fold, la maggior parte delle animazioni non sarebbe visibile se utilizzassimo semplicemente un ritardo di tempo come abbiamo fatto con gli altri elementi. Quindi faremo in modo che non sia così.

Opzioni di animazione

Prima di tutto, ripeteremo i processi sopra. Solo con questa riga, stiamo impostando lo stile di animazione su Dissolvenza. Quindi, imposteremo la Durata a 500 ms in modo che questa riga appaia più rapidamente durante la sua animazione. Noi ritardare da 1500ms per garantire le altre animazioni sono pienamente compiuta prima di questo inizio.

Infine, assicurati di controllare che l' opacità iniziale sia impostata su 0% . Vogliamo che questa riga sia invisibile finché non è pronta per essere vista.

Scorri le impostazioni degli effetti

È qui che le cose si fanno divertenti perché possiamo combinare gli effetti. Fare clic sulla scheda Avanzate per la riga e trovare Effetti di scorrimento . Trova la scheda Movimento orizzontale e assicurati di attivarla. Quindi imposta il trigger dell'effetto di movimento su Middle of Element . Utilizziamo la parte centrale anziché la parte superiore per garantire che l'effetto non inizi ad avere effetto finché l'utente non scorre, nel caso in cui la finestra dell'utente mostri la parte superiore della riga.

Con quel set, la riga aspetterà fino a quando tutto il resto non avrà terminato l'animazione per apparire, quindi quando l'utente scorrerà verso di essa, l'intera riga sembrerà scorrere dal lato dello schermo.

Risultati finali

Quando finisci tutto questo, i tuoi risultati dovrebbero essere simili a questo.

Desktop

Mobile

Conclusione

L'aggiunta di effetti di animazione è un modo infallibile per rendere il tuo sito più dinamico, più interessante e visivamente più accattivante. Utilizzando gli strumenti di animazione ed effetti di scorrimento incorporati di Divi, puoi creare combinazioni sorprendenti che stupiranno qualsiasi visitatore che capita di passare.

Cosa hai usato per creare gli effetti di animazione Divi dalle tue sezioni e righe? Vediamoli nei commenti!

Immagine in primo piano dell'articolo di Vectorchok / shutterstock.com