Editor Studio: aggiungere un'interazione predefinita al clic o al passaggio del mouse
7 min
In questo articolo:
- Passaggio 1 | Aggiungi un trigger (clic o passaggio del mouse)
- Passaggio 2 | Configura l'interazione
- Passaggio 3 | (Facoltativo) Regola l'animazione
- FAQ
Aggiungi interazioni per creare un'esperienza animata mentre i visitatori cliccano o passano il mouse sugli elementi. Vuoi aggiungere un'animazione in modo facile e veloce? Usa una delle nostre animazioni predefinite (ad esempio Espandi, Sposta, Dissolvi) e modificala a tuo piacimento.
L'interazione può animare lo stesso elemento su cui i visitatori cliccano o passano il mouse o un elemento diverso della pagina. In ogni caso, hai pieno controllo dell'aspetto, dell'effetto e delle tempistiche, quindi è davvero efficace.
Quali sono i preset di animazione disponibili?
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. Quindi, vai al pannello Ispezione per aggiungere una nuova interazione.
Suggerimento:
Puoi aggiungere più interazioni a un elemento in modo che attivi un'animazione diversa al passaggio del mouse o al clic.
Per aggiungere un trigger:
- Seleziona l'elemento che dovrebbe attivare l'interazione
- Clicca sull'icona Apri Ispezione
in alto a destra dell'Editor
- Clicca sulla scheda Animazioni ed effetti
- Seleziona Passaggio del mouse o Clic
- Clicca su + Aggiungi
Passaggio 2 | Configura l'interazione
Dopo aver scelto un elemento e un trigger, imposta l'interazione. Seleziona un'animazione predefinita, l'elemento che dovrebbe mostrarla e cosa succede esattamente al passaggio del mouse o al clic.
Nota:
Le animazioni disponibili dipendono dall'elemento che hai selezionato.
Per configurare l'interazione:
- (Nel pannello Configurazione) Scegli cosa succede al Passaggio del mouse o al Clic:
- Avvia animazione: al clic o passaggio del mouse sull'elemento si attiva l'animazione scelta
- Ripristina animazione: al clic o al passaggio del mouse sull'elemento viene rimossa qualsiasi animazione applicata in precedenza
- Attiva/disattiva: cliccando sull'elemento si attiva l'animazione e un secondo clic la disattiva
Nota: questa opzione è disponibile solo per le interazioni tramite clic
- Seleziona l'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
- Seleziona un'animazione:
- Clicca sulla scheda Predefinite
- Scegli un'animazione dall'elenco
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.Passaggio 3 | (Facoltativo) Regola l'animazione
Dopo aver scelto l'animazione che desideri, personalizzala per ottenere l'effetto desiderato. Puoi controllare impostazioni come la durata, il ritardo e l'interpolazione per rendere l'animazione davvero efficace.
Nota:
Le impostazioni disponibili dipendono dall'animazione predefinita che hai scelto.
Per regolare l'animazione:
- (Nelle pannello Ispezione) Clicca su Regola animazione in basso
- Personalizza le impostazioni disponibili a tuo piacimento:
- Ritarda: trascina il cursore per aggiungere un ritardo (in secondi) prima dell'inizio dell'animazione
- Durata: trascina il cursore per impostare la durata dell'animazione (in secondi)
- Interpolazione: scegli come l'animazione entra e scompare dal menu a tendina
- Ridimensiona: scegli di quanto l'elemento cresce o si riduce
- Angolo: modifica l'angolo di movimento
- Distanza: fai in modo che l'elemento si allontani o si avvicini alla sua posizione predefinita sulla pagina
- Direzione: modifica la direzione di rotazione dell'elemento
- (Facoltativo) Clicca su Anteprima per vedere come appare l'animazione e apportare modifiche, se necessario
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 più elementi?
Un singolo elemento può avere più animazioni?
Come posso rimuovere un'interazione al clic o al passaggio del mouse da un elemento?
Qual è la differenza tra un'animazione al passaggio del mouse e lo stato passaggio del mouse nei tasti?