Editor Studio: creare un'interazione personalizzata al clic o al passaggio del mouse
Tempo di lettura: 6 min.
Aggiungi delle interazioni per creare un'esperienza animata mentre i visitatori cliccano o passano il mouse sugli elementi. L'interazione può animare lo stesso elemento che l'ha attivata o qualsiasi altro elemento della pagina.
Con le interazioni personalizzate, hai piena libertà creativa per progettare un'animazione da zero. Puoi anche controllare le tempistiche dell'animazione per renderla davvero efficace.
Passaggio 1 | Aggiungi un trigger (clic o passaggio del mouse)
Per iniziare, seleziona l'elemento che attiva l'interazione. Questo è l'elemento su cui i visitatori passano il mouse o cliccano prima di vedere l'animazione. Poi vai alla scheda Interazioni nel pannello Ispezione per aggiungere una nuova interazione.
Suggerimento:
Puoi aggiungere più interazioni a un elemento, in modo che attivi diverse animazioni al passaggio del mouse o al clic.
Per aggiungere un trigger:
- Seleziona l'elemento che dovrebbe attivare l'interazione
- Clicca sulla freccia Apri Ispezione
in alto a destra dell'Editor - Clicca sulla scheda Interazioni
- Seleziona Passaggio del mouse/Clic
- Clicca su + Aggiungi
Passaggio 2 | Configura l'interazione
Ora puoi scegliere quale elemento deve essere animato, l'animazione che dovrebbe apparire e l'azione esatta che si verifica al passaggio del mouse o al clic (ad esempio, applicare l'animazione, attivarla o disattivarla, ecc.).
Per impostare l'interazione:
- Seleziona un'opzione dal menu a tendina Passaggio del mouse/Clic:
- Avvia animazione: cliccando o passando il mouse sull'elemento si attiva l'animazione scelta
- Attiva/disattiva: simile a un interruttore, cliccando sull'elemento si attiva l'animazione e un secondo clic la rimuove
- Ripristina animazione: al clic o al passaggio del mouse sull'elemento viene rimossa qualsiasi animazione applicata in precedenza
- Seleziona un'opzione dal menu a tendina Elemento animato:
- Fai in modo che l'elemento attivi la propria animazione: clicca sul nome dell'elemento (accanto ad esso viene visualizzata la parola (stesso)
- Anima un elemento diverso sulla pagina: seleziona un elemento dal menu a tendina o clicca su Scegli su area di lavoro per selezionarlo nella pagina
Suggerimento: tieni premuto il tasto Cmd/Ctrl per selezionare un elemento child
- Clicca sulla scheda Personalizzate
- Clicca su Crea animazione personalizzata
Suggerimento:
Le animazioni personalizzate che crei vengono salvate per un utilizzo futuro su altri elementi.
Passaggio 3 | Personalizza l'animazione
Ora è il momento di creare l'animazione da zero. Aggiungi tutti i tipi di layout e design per modificare le dimensioni dell'elemento (Ridimensiona), la posizione (Converti), l'angolo (Ruota), il colore di riempimento e altro ancora.
Puoi anche progettare lo stato iniziale dell'elemento per completare l'animazione che hai creato. Questo è l'elemento come appare quando viene caricato, prima che i visitatori interagiscano con esso. Per collegare il tutto, imposta la durata e l'interpolazione dell'animazione.
Per personalizzare l'animazione:
- Scegli come vuoi personalizzare l'animazione:
Regola il design dell'elemento
Progetta lo stato iniziale dell'elemento
Imposta la durata e l'andamento dell'animazione
2. (Facoltativo) Clicca su 
Play sulla barra superiore delle interazioni per visualizzare in anteprima l'animazione
Play sulla barra superiore delle interazioni per visualizzare in anteprima l'animazione3. Al termine, clicca su Fatto
Suggerimento:
Quando imposti un elemento da mostrare al clic o al passaggio del mouse, questo viene visualizzato sull'area di lavoro con un overlay a scacchi. Questo per indicare che l'elemento è inizialmente trasparente.
Puoi disattivare questa indicazione in qualsiasi momento. Clicca sull'icona Wix Studio 
, passa il mouse su Visualizza e clicca su Elementi trasparenti.
, passa il mouse su Visualizza e clicca su Elementi trasparenti.FAQ
Clicca qui sotto per saperne di più su come creare le interazioni.
Come appare un elemento che attiva la propria animazione?
Come appare un'interazione tra diversi elementi?
Un elemento può attivare elementi multipli differenti?
Un singolo elemento può avere più animazioni?
Hai trovato utile questo articolo?
|