È possibile aggiungere un effetto di animazione a qualsiasi elemento Zero Block. Esistono due tipi di effetti di animazione: di base e avanzati o animazione passo-passo. In questo articolo, tratteremo le impostazioni di animazione più basilari.
Le opzioni di animazione di base includono:
- Animazione: varie opzioni per l'inizio dell'effetto di animazione;
- Parallasse: le impostazioni dell'effetto di parallasse;
- Fissaggio: impostazioni dell'effetto di posizionamento fisso.
Animazione
Gli effetti di animazione includono Fade In, Fade In Right, Fade In Left, Fade In Up, Fade In Down e Zoom In .
Tutti gli effetti di animazione hanno una serie di impostazioni comuni come Durata, Ritardo e Offset trigger.
La durata è la durata dell'effetto di animazione in secondi. Il valore numerico è il numero di secondi in cui verrà eseguito l'effetto di animazione.
Il ritardo è il ritardo in secondi prima dell'inizio dell'effetto di animazione.
L'offset trigger è l'offset in pixel dal bordo inferiore del contenitore finestra in corrispondenza del quale inizia la riproduzione dell'animazione.
Quando si utilizzano effetti di animazione con elementi visualizzati dall'alto, dal basso, da destra o da sinistra, l'opzione "Distanza" indica la distanza coperta dal blocco da cui appare per la prima volta.
L'effetto Zoom in ha un'impostazione Scala. Se è impostato su un valore inferiore al 100%, l'elemento esegue lo zoom fino alle dimensioni originali. Se è impostato su più di 100%, l'elemento esegue lo zoom indietro e appare più piccolo.
La durata è la durata dell'effetto di animazione in secondi. Il valore numerico è il numero di secondi in cui verrà eseguito l'effetto di animazione.
Il ritardo è il ritardo in secondi prima dell'inizio dell'effetto di animazione.
L'offset trigger è l'offset in pixel dal bordo inferiore del contenitore finestra in corrispondenza del quale inizia la riproduzione dell'animazione.
Quando si utilizzano effetti di animazione con elementi visualizzati dall'alto, dal basso, da destra o da sinistra, l'opzione "Distanza" indica la distanza coperta dal blocco da cui appare per la prima volta.
L'effetto Zoom in ha un'impostazione Scala. Se è impostato su un valore inferiore al 100%, l'elemento esegue lo zoom fino alle dimensioni originali. Se è impostato su più di 100%, l'elemento esegue lo zoom indietro e appare più piccolo.
Parallasse
Le animazioni di parallasse hanno due impostazioni: sullo scorrimento e sullo spostamento del mouse.
Parallasse sullo scorrimento
Parallasse al movimento del mouse
Nelle impostazioni per Parallax sullo scorrimento, trova l'impostazione Velocità. Se la velocità è inferiore al 100%, un elemento si sposterà più lentamente della pagina che si sta scorrendo. Se la velocità è superiore al 100%, l'elemento si sposterà più velocemente della pagina che si sta scorrendo.
Nelle impostazioni per la parallasse al movimento del mouse, la distanza lungo gli assi X e Y indica il massimo effetto di inclinazione della parallasse.
Nelle impostazioni per la parallasse al movimento del mouse, la distanza lungo gli assi X e Y indica il massimo effetto di inclinazione della parallasse.
Fissaggio
Quando impostate un'animazione di fissaggio, potete scegliere dove fissare l'elemento. Questa è l'area dello schermo (la parte superiore, centrale o inferiore dello schermo) in cui inizia a verificarsi l'effetto di fissaggio. È possibile scegliere una delle tre aree: Finestra superiore, Centro finestra o Finestra inferiore.
L'offset del trigger è il punto in cui un elemento verrà fissato rispetto a Window Top, Window Center o Window Bottom.
Distanza è la distanza in pixel che l'elemento deve coprire durante l'animazione di fissaggio.
L'offset del trigger è il punto in cui un elemento verrà fissato rispetto a Window Top, Window Center o Window Bottom.
Distanza è la distanza in pixel che l'elemento deve coprire durante l'animazione di fissaggio.
Ti consigliamo di leggere l'articolo "Sticky Elements in Zero Block" per imparare come creare un effetto di fissaggio e come appare su una pagina.
