Editor X: aggiungere un'interazione predefinita
Tempo di lettura: 5 min.
Editor X sta passando a Wix Studio, la nostra nuova piattaforma per agenzie e freelancer.Scopri di più su Wix Studio
Aggiungi Interazioni per creare un'esperienza animata mentre i visitatori cliccano o passano il mouse sugli elementi. Hai bisogno di un'animazione facile e veloce? Usa una delle interazioni predefinite (ad esempio Aumenta, Sposta, Dissolvenza) 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.
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 alla scheda Interazioni nel pannello Ispezione per aggiungere la tua 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 Ispezione
nella parte superiore dell'Editor X - (Nel pannello Ispezione) Clicca sulla scheda Interazioni
- Clicca su + Aggiungi sotto Passaggio del mouse/Clic
Passaggio 2 | Configura la tua 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 variano in base all'elemento selezionato.
Per impostare la tua interazione:
- (Nel pannello Interazione) Scegli cosa succede al Passaggio del mouse o al Clic:
- Avvia animazione: cliccando o passando il mouse sull'elemento si attiva l'animazione scelta
- Ripristina animazione: al clic/passaggio del mouse sull'elemento si rimuove 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 su Visualizza nella barra superiore, quindi 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.
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 quanto ingrandire o rimpicciolire il tuo elemento
- Angolo: modifica l'angolo di movimento
- Distanza: sposta l'elemento più lontano o più vicino alla sua posizione predefinita sulla pagina
- Direzione: cambia la direzione in cui ruota l'elemento
- (Facoltativo) Clicca su Anteprima per vedere come appare l'animazione e apportare modifiche, se necessario
Nota:
Le impostazioni disponibili dipendono dall'animazione predefinita che hai scelto.
Qual è il prossimo passo?
Rivedi e gestisci l'elenco delle interazioni per ogni elemento.
FAQ
Clicca qui sotto per saperne di più sulla creazione di 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?
|