Editor Wix Harmony: aggiungere e personalizzare un'animazione
In questo articolo:
- Aggiungere un'animazione a un elemento
- Personalizzare un'animazione
- Aggiungere animazioni al tuo sito mobile
Dai vita al tuo sito con animazioni che aggiungono movimento ed energia al tuo design. Scegli tra opzioni come effetti di entrata, scorrimento, loop e effetti del mouse, in base a quando vuoi che l'animazione appaia.
Personalizza ogni animazione per creare l'aspetto esatto che desideri, regolando impostazioni come distanza, durata e ritardo per adattarle alla tua visione. Tutte le animazioni per mobile sono progettate per schermi più piccoli, così il tuo sito ha un aspetto d'impatto su qualsiasi dispositivo.
Lo sapevi?
Puoi applicare diverse animazioni ed effetti allo stesso elemento.
Aggiungere un'animazione a un elemento
Aggiungi movimento ed energia al tuo sito applicando animazioni ai tuoi elementi. Scegli tra una varietà di effetti per dare vita a ogni parte della tua pagina e creare un'esperienza che i tuoi visitatori ricorderanno.
Per aggiungere un'animazione:
- Vai al tuo Editor
- Clicca sull'elemento pertinente
- Clicca sull'icona Animazione
sulla barra delle azioni - Seleziona un'animazione tra le opzioni disponibili
- Entrata: l'animazione introduce un elemento sullo schermo: viene riprodotta solo una volta, quando l'elemento appare per la prima volta
- Loop: l'animazione viene riprodotta in un ciclo continuo
- Scorrimento: l'animazione viene riprodotta quando un visitatore si avvicina all'elemento mentre scorre la pagina verso l'alto o verso il basso
- Effetti del mouse: l'animazione inizia a muoversi quando il cursore del visitatore passa sopra l'elemento
Nota:
Gli elementi nell'intestazione si animeranno solo una volta, durante la prima visita alla pagina.
Personalizzare un'animazione
Dopo aver aggiunto un'animazione a un elemento, personalizzala per adattarla al look and feel del tuo sito. Regola opzioni come potenza, direzione e ritardo per creare l'effetto esatto che desideri e coinvolgere i tuoi visitatori.
Nota:
Le opzioni di personalizzazione disponibili dipendono dall'animazione scelta.
Per personalizzare l'animazione:
- Vai al tuo Editor
- Seleziona l'elemento pertinente
- Clicca sull'icona Animazione sulla barra delle azioni
- (Se non l'hai già fatto) Seleziona un'animazione tra le opzioni disponibili
- Clicca su Personalizza per regolare l'animazione scelta:
- Potenza: clicca sul menu a tendina per selezionare quanto è potente l'animazione quando viene riprodotta
- Direzione: seleziona la direzione da cui entra l'animazione (es. in senso orario, da destra)
- Distanza: usa il cursore per modificare la distanza tra il punto di inizio e di fine dell'effetto
- Durata: usa il cursore per regolare per quanto tempo vuoi che l'animazione venga riprodotta
- Ritardo: usa 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 è l'effetto
- Asse di movimento: decidi se l'elemento si muove orizzontalmente, verticalmente o su entrambi gli assi
- Tipo di animazione: scegli tra il tipo di animazione in entrata, in uscita o continua durante lo scorrimento
- Perno: scegli il punto di riferimento da cui l'elemento inizia a muoversi
- Stile di movimento: seleziona l'intensità del movimento, ad esempio delicato o moderato
Aggiungere animazioni al tuo sito mobile
Puoi aggiungere animazioni al tuo sito mobile, proprio come su desktop, così i visitatori godono di un'esperienza coinvolgente su qualsiasi dispositivo. Le animazioni per mobile sono progettate appositamente per schermi e risoluzioni più piccoli, così tutto si adatta perfettamente.
Nota:
Le animazioni che aggiungi su desktop appariranno anche sul tuo sito mobile, ma puoi scegliere un'animazione diversa per il mobile (o disabilitarla) senza modificare l'animazione su desktop.
Per aggiungere un'animazione su mobile:
- Vai al tuo Editor
- Clicca sull'icona Mobile
nell'angolo in alto a destra della pagina - Clicca sull'elemento pertinente
- Clicca sull'icona Animazione
sulla barra delle azioni - Seleziona un'animazione tra le opzioni disponibili
