Un effetto di animazione può essere aggiunto a qualsiasi elemento del sito Zero Block . Esistono due tipi di effetti di animazione: quelli di base e quelli avanzati, o animazione passo-passo. In questo articolo tratteremo le impostazioni di base dell'animazione.
Le opzioni di animazione di base includono:
- Animazione: diverse opzioni per l'avvio dell'effetto di animazione;
- Parallasse: le impostazioni dell'effetto parallasse;
- Fissare le impostazioni dell'effetto di posizionamento fisso.
Animazione
Gli effetti di animazione includono dissolvenza in avanti, dissolvenza a destra, dissolvenza a sinistra, dissolvenza in alto, dissolvenza in basso e zoom.
Tutti gli effetti di animazione hanno una serie di impostazioni comuni, come Durata, Ritardo e Offset di attivazione.
La Durata è la durata dell'effetto di animazione in secondi. Il valore numerico è il numero di secondi in cui l'effetto di animazione avrà luogo.
Il Ritardo è il ritardo in secondi prima dell'inizio dell'effetto di animazione.
L'offset di attivazione è l'offset in pixel dal bordo inferiore del contenitore della finestra al quale l'animazione inizia a essere riprodotta.
Quando si usano effetti di animazione con elementi che appaiono dall'alto, dal basso, da destra o da sinistra, l'opzione "Distanza" indica la distanza coperta dal blocco dal punto in cui appare per la prima volta.
L'effetto Zoom avanti ha un'impostazione di Scala. Se è impostata a meno del 100%, l'elemento viene ingrandito alle sue dimensioni originali. Se è impostata a più del 100%, l'elemento si riduce e appare più piccolo.
La Durata è la durata dell'effetto di animazione in secondi. Il valore numerico è il numero di secondi in cui l'effetto di animazione avrà luogo.
Il Ritardo è il ritardo in secondi prima dell'inizio dell'effetto di animazione.
L'offset di attivazione è l'offset in pixel dal bordo inferiore del contenitore della finestra al quale l'animazione inizia a essere riprodotta.
Quando si usano effetti di animazione con elementi che appaiono dall'alto, dal basso, da destra o da sinistra, l'opzione "Distanza" indica la distanza coperta dal blocco dal punto in cui appare per la prima volta.
L'effetto Zoom avanti ha un'impostazione di Scala. Se è impostata a meno del 100%, l'elemento viene ingrandito alle sue dimensioni originali. Se è impostata a più del 100%, l'elemento si riduce e appare più piccolo.
Parallasse
Le animazioni di parallasse hanno due impostazioni: lo scorrimento e il movimento del mouse.
Parallasse su scorrimento
Parallasse al passaggio del mouse
Nelle impostazioni di Parallasse su scorrimento, si trova l'impostazione Velocità. Se la velocità è inferiore al 100%, un elemento si muoverà più lentamente della pagina che si sta scorrendo. Se la velocità è superiore al 100%, l'elemento si muoverà più velocemente della pagina che si sta scorrendo.
Nelle impostazioni di Parallasse al passaggio del mouse, la distanza lungo gli assi X e Y indica l'effetto massimo di inclinazione del parallasse.
Nelle impostazioni di Parallasse al passaggio del mouse, la distanza lungo gli assi X e Y indica l'effetto massimo di inclinazione del parallasse.
Fissazione
Quando si imposta un'animazione di fissaggio, è possibile scegliere il punto in cui l'elemento verrà fissato. Si tratta dell'area dello schermo (in alto, al centro o in basso) in cui inizia l'effetto di fissaggio. È possibile scegliere una delle tre aree: la parte superiore della finestra, il centro della finestra o il fondo della finestra.
L'offset di attivazione è il punto in cui un elemento verrà fissato rispetto alla parte superiore della finestra, al centro della finestra o al fondo della finestra.
La distanza è la distanza in pixel che l'elemento deve coprire durante l'animazione di fissaggio.
L'offset di attivazione è il punto in cui un elemento verrà fissato rispetto alla parte superiore della finestra, al centro della finestra o al fondo della finestra.
La distanza è la distanza in pixel che l'elemento deve coprire durante l'animazione di fissaggio.
Si consiglia di leggere l'articolo "Elementi adesivi in Zero Block " per imparare come creare un effetto di fissaggio e come si presenta su una pagina.
