Editor Studio: aggiungere un'animazione di scorrimento
Tempo di lettura: 4 min.
Aggiungi animazioni di scorrimento per rendere l'esperienza di navigazione più coinvolgente e memorabile. Il movimento dell'animazione è direttamente collegato alla posizione di scorrimento, rivelando o trasformando un elemento mentre i visitatori scorrono verso l'alto e verso il basso.
In questo articolo, scopri di più su come:
Aggiungere un'animazione di scorrimento
Per aggiungere una nuova animazione di scorrimento, seleziona l'elemento che la attiva. L'animazione scelta inizia quando i visitatori scorrono oltre questo elemento. Quindi, decidi quale elemento viene animato e seleziona un percorso di animazione.
Per aggiungere un'animazione di scorrimento:
- Seleziona l'elemento o la sezione pertinente
- Clicca sulla freccia Apri Ispezione
in alto a destra dell'Editor - Clicca sulla scheda Interazioni
- Clicca su + Aggiungi sotto Scorrimento
- Imposta l'animazione:
- Scegli quale elemento mostra l'animazione sotto Elemento animato
- Seleziona un'opzione in Percorso animazione per decidere come iniziare l'animazione, in riferimento all'elemento che hai progettato. Puoi rendere il design su un'area di lavoro il punto di inizio (Dal suo design) o il punto finale (Verso il suo design) dell'animazione
- Seleziona un'animazione dall'elenco
Suggerimento: passa il mouse sulle animazioni per visualizzarne un'anteprima
Personalizzare un'animazione di scorrimento
Dopo aver scelto un'animazione, impostala in modo che si comporti come desideri. Le impostazioni disponibili dipendono dall'animazione specifica che hai scelto.
Per personalizzare un'animazione di scorrimento:
- Seleziona l'elemento o la sezione pertinente
- Clicca sulla freccia Apri Ispezione in alto a destra dell'Editor
- Clicca sulla scheda Interazioni
- Clicca sull'animazione che vuoi modificare
- Clicca su Regola animazione per modificarne le impostazioni:
- Direzione: scegli la direzione da cui dovrebbe provenire l'animazione (es. da sinistra, dall'alto)
- Ridimensiona: imposta la dimensione target per l'elemento in questa animazione. Ad esempio, 80% significa che l'elemento si rimpicciolisce del 20% nell'animazione
- Distanza: decidi di quanto si muove l'elemento in questa animazione
- Area animazione: decidi in che punto durante lo scorrimento l'animazione inizia e si interrompe. 0% è la parte inferiore dello schermo e 100% è la parte superiore. Ad esempio, se imposti l'area su 100%, l'animazione inizia quando l'elemento si trova in basso e termina quando raggiunge la parte superiore
Suggerimento:
Abilita l'interruttore Scorri per l'anteprima per vedere l'animazione che stai creando direttamente nell'area di lavoro.
Eliminare un'animazione di scorrimento
Puoi rimuovere un'animazione di scorrimento in qualsiasi momento dal pannello Ispezione.
Per rimuovere un'animazione di scorrimento:
- Seleziona l'elemento o la sezione pertinente
- Clicca sulla freccia Apri Ispezione in alto a destra dell'Editor
- Clicca sulla scheda Interazioni
- Passa il mouse sull'animazione e clicca sull'icona Altre azioni
- Clicca su Rimuovi
Hai trovato utile questo articolo?
|