Editor Wix: aggiungere e personalizzare un'animazione
4 min
In questo articolo:
- Aggiungere un'animazione a un elemento
- Personalizzare un'animazione
- Aggiungere animazioni al tuo sito mobile
Usa le animazioni per dare vita al tuo sito. Offriamo varie animazioni per qualsiasi aspetto del tuo design: entrata, scorrimento, loop e persino effetti del mouse.
Puoi personalizzare l'animazione in modo che sia esattamente come la immagini. Ad esempio, regola la distanza, la durata, il ritardo e molto altro ancora. Le nostre animazioni mobile sono progettate per adattarsi a schermi più piccoli, così puoi stupire i tuoi visitatori su qualsiasi dispositivo.
Puoi applicare animazioni ed effetti diversi allo stesso elemento.
Problemi con l'animazione?
Segui i nostri passaggi per assicurarti che funzionino come previsto sul tuo sito live.
Aggiungere un'animazione a un elemento
Rendi il tuo sito dinamico e coinvolgente aggiungendo un'animazione ai tuoi elementi. Ogni animazione ha un effetto diverso, quindi puoi mescolarli con elementi diversi e lasciare il segno nei tuoi visitatori.
Suggerimento:
Puoi aggiungere animazioni a un gruppo di elementi selezionando il gruppo e cliccando sull'icona Animazione 
.
.Per aggiungere l'animazione:
- Clicca sull'elemento pertinente nell'Editor
- Clicca sull'icona Animazione
- Seleziona un'animazione tra le opzioni disponibili
- Entrata: l'animazione verrà riprodotta solo una volta quando l'elemento selezionato appare sullo schermo
- Loop: l'animazione viene riprodotta continuamente in loop
- Scorrimento: l'animazione viene riprodotta quando l'elemento scorre sullo schermo
- Movimento ed effetti: l'animazione inizia a muoversi quando il visitatore passa il mouse sull'elemento
Nota:
L'animazione degli elementi nell'intestazione si attiverà solo una volta, durante la prima visita alla pagina.
Personalizzare un'animazione
Dopo aver aggiunto l'animazione a un elemento, puoi personalizzarla per adattarla al tuo sito.
Regola le impostazioni come la potenza, la direzione e il ritardo per coinvolgere i tuoi visitatori.
Nota:
Le opzioni di personalizzazione disponibili dipendono dall'animazione scelta.
Per personalizzare l'animazione:
- Clicca sull'elemento pertinente nell'Editor
- Clicca sull'icona Animazione
- Clicca su Personalizza e utilizza le opzioni per regolare l'animazione:
- Potenza: clicca sul menu a tendina per selezionare la potenza dell'animazione durante la riproduzione
- Direzione: seleziona la direzione da cui entra l'animazione (es. in senso orario, da destra)
- Distanza: utilizza il cursore per modificare la distanza tra il punto iniziale e finale dell'effetto
- Durata: utilizza il cursore per regolare la durata della riproduzione dell'animazione
- Ritardo: trascina il cursore per aumentare o diminuire il ritardo tra il caricamento della pagina e l'inizio dell'animazione
- Velocità: trascina il cursore per modificare la velocità dell'effetto: più basso è il numero, più veloce sarà l'effetto
- Asse di movimento: decidi se l'elemento si sposta orizzontalmente, verticalmente o su entrambi gli assi
- Tipo di animazione: scegli tra il tipo di animazione in ingresso, in uscita o continua durante lo scorrimento
- Pivot: scegli il punto da dove l'elemento inizia a muoversi
- Movimento: seleziona l'intensità del movimento, ad esempio leggero o moderato
Suggerimento sull'accessibilità:
Se questo elemento è puramente decorativo, il che significa che non include informazioni importanti per gli screen reader, seleziona la casella di spunta Decorativo nel pannello Impostazioni 
.
.Aggiungere animazioni al tuo sito mobile
Oltre ad aggiungere animazioni agli elementi del tuo sito desktop, puoi anche aggiungerli al tuo sito mobile, in modo che i tuoi visitatori abbiano un'esperienza di navigazione eccezionale da tutti i loro dispositivi.
Le animazioni per dispositivi mobile sono state progettate specificamente per risoluzioni e dimensioni dello schermo più piccole, quindi non devi preoccuparti della spaziatura.
Nota:
Gli effetti di animazione aggiunti sul desktop non vengono trasferiti sul tuo sito mobile, poiché sono ottimizzati per schermi di diverse dimensioni. Se vuoi che un elemento sia animato anche su mobile, segui i passaggi riportati di seguito.
Per aggiungere animazioni su dispositivi mobile:
- Vai al tuo Editor mobile
- Clicca sull'elemento pertinente
- Clicca sull'icona Animazione
- Seleziona un'animazione tra le opzioni disponibili
Nota importante per Velo:
Se stai utilizzando Velo (codice) per nascondere o mostrare un elemento, anche la sua animazione deve essere impostata tramite Velo.