Editor Studio: informazioni sulle animazioni

Tempo di lettura: 3 min.
Incorporare le nostre animazioni nei tuoi design può davvero portarli a un livello superiore. L'Editor Studio offre 5 diversi tipi di animazione, in base a quando vuoi che appaiano sullo schermo.
Mostra delle animazioni quando i visitatori passano il mouse, cliccano o scorrono un elemento. Puoi anche aggiungere un'animazione in entrata, al primo caricamento dell'elemento, o una che si ripete in loop, il tutto senza dover usare alcun codice.
Nota:
La dimensione dell'animazione viene calcolata in base al tuo browser specifico al primo caricamento della pagina. Se ridimensioni la finestra del browser (trascinando le maniglie), l'animazione potrebbe non apparire correttamente. Ti consigliamo di aggiornare la pagina per una visualizzazione ottimale.

Animazione in entrata

Aggiungere un'animazione in entrata su un elemento è un ottimo modo per attirare l'attenzione dei visitatori su di esso. L'animazione appare quando l'elemento appare per la prima volta, quindi attira immediatamente l'attenzione. Ce ne sono di molti tipi tra cui scegliere e puoi personalizzarli in base alle esigenze del cliente.
Un esempio di animazione in entrata applicata a un'intera pagina, che la rivela durante il caricamento

Interazioni al passaggio del mouse e clic

Aggiungi fantastici effetti che appaiono quando i visitatori passano il mouse o cliccano su un elemento. Puoi trasformare gli elementi, spostare o rivelare nuovi contenuti al passaggio del mouse o con un clic.
Scegli tra una gamma di effetti predefiniti o crea un effetto personalizzato con le tue specifiche esatte. Gestisci i tempi, l'ordine e la facilità per collegare il tutto, quindi visualizza in anteprima il risultato finale direttamente dall'Editor.
Puoi anche creare interazioni tra gli elementi, in modo che il passaggio del mouse o il clic su un elemento ne attivi un altro.
Nell'esempio seguente, il passaggio del mouse sul paragrafo attiva lo spostamento del tasto e dell'immagine.
GIF che mostra come appaiono le interazioni su un sito online

Animazioni di scorrimento

Aumenta il coinvolgimento e crea effetti interessanti con le animazioni di scorrimento. Il movimento dell'animazione è direttamente correlato alla posizione di scorrimento, muovendosi avanti e indietro mentre i visitatori scorrono verso l'alto e verso il basso. 
Puoi anche creare interazioni tra gli elementi, in modo che scorrere oltre un elemento ne attivi un altro.
Nell'esempio seguente, scorrendo oltre il titolo fa ingrandire la lista dinamica. 
Un esempio di animazione di scorrimento su un sito live

Animazione in loop

Crea un senso di movimento nel tuo design con animazioni che si ripetono in loop. Puoi aggiungere un'animazione in loop a qualsiasi elemento che vuoi che i visitatori notino: alcuni sono più discreti, altri attirano maggiormente l'attenzione. 
Esempio di elemento maschera di testo con animazione in loop su un sito live

Hai trovato utile questo articolo?

|