Anima gli elementi allo scorrimento, al passaggio del mouse o al clic.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

Puoi far muovere una sezione, una riga o qualsiasi elemento di contenuto. Fai apparire un titolo in dissolvenza mentre scorre in vista, lascia che un pulsante lo segua un attimo dopo, o fai pulsare un’icona al passaggio del mouse. Ognuno ha un pannello Animation nelle sue impostazioni. L’esempio fa apparire un titolo in dissolvenza, poi un pulsante di registrazione dopo un breve ritardo.

Il video fa apparire in dissolvenza un pulsante e un titolo mentre la sezione entra in vista.

Fai apparire un titolo e un pulsante in dissolvenza

  1. Fai clic su Add Elements nell’area di contenuto vuota e scegli Section nella scheda Layout.
  2. Passa sopra la sezione con il mouse e apri More > Settings.
  3. In HTML classes, scegli Align text center e fai clic su Save.
  4. Fai clic su + sulla sezione e scegli Button nella scheda Content. Si aprono le sue impostazioni.
  5. Digita Register now in Title e /register in Link.
  6. Apri il pannello Animation e imposta Animation start a On appear.
  7. Imposta Animation in a fadeInUp.
  8. In Hidden, spunta Before in-animation.
  9. Imposta In-delay a 600 e fai clic su Save.
  10. Fai clic di nuovo su + sulla sezione e scegli Text nella scheda Content. Atterra sopra il pulsante.
  11. Digita un titolo, come Open day 2026, e impostalo a Heading 2 nella barra dell’editor.
  12. Apri il pannello Animation. Scegli On appear, fadeInUp e Before in-animation, come per il pulsante.
  13. Imposta Duration a 800 e fai clic su Save.
  14. Fai clic su Save sulla barra.
  15. Apri il menu vista (l’icona occhio sulla barra) e scegli Preview.

Altri effetti da provare

  • Rivelazione allo scorrimento: On appear, fadeInUp, Before in-animation e una Duration di 800.
  • Card sfalsate: lo stesso effetto su tre card, con un In-delay di 0, 200 e 400.
  • Pulsazione di attenzione: On appear, pulse, Infinite attivo e una Duration di 1500.
  • Pulsazione hover: On hover, pulse e un Parent number di 0, così reagisce solo l’elemento stesso.
  • Rivelazione tab: On trigger e fadeIn sugli elementi dentro un tab. Si attivano ogni volta che il tab si apre.

Cosa vedrai

Quando salvi il testo, l’editor riproduce entrambi gli effetti: il titolo appare in dissolvenza in 800 millisecondi e il pulsante segue 600 millisecondi dopo. I visitatori vedono lo stesso mentre la sezione scorre in vista, una volta per caricamento di pagina. Entrambi restano invisibili finché il loro effetto non inizia, perché Before in-animation è spuntato.

Impostazioni

Impostazione Cosa fa Predefinito
Animation start Quando si attiva l’effetto: On appear (scorso in vista), On hover, On click o On trigger (quando si apre la slide del carosello, il tab o il toggle che contiene l’elemento) No animation
Animation in L’effetto di entrata: dissolvenze, scorrimenti, zoom, ribaltamenti ed effetti di attenzione come bounce, pulse e shake No animation
Animation out L’effetto di uscita, dallo stesso elenco. Compare solo per On hover e On trigger. No animation
Hidden Before in-animation mantiene l’elemento invisibile finché il suo effetto non si attiva. After in-animation lo nasconde al termine dell’effetto. Nessuno dei due
Infinite Ripete l’effetto senza fine Spento
Appear boundary Per On appear: quanto sotto lo schermo inizia l’effetto, in percentuale dell’altezza dello schermo. 0 lo avvia mentre l’elemento scorre in vista; 100 lo avvia un’altezza di schermo prima. 100
Duration Durata dell’effetto, da 0 a 3000 millisecondi 1000
In-delay Attesa prima dell’entrata, fino a 10000 millisecondi 0
Out-delay Attesa prima dell’uscita, fino a 10000 millisecondi 0
Parent number Per On hover e On click: quale elemento il visitatore indica o clicca. 0 è l’elemento stesso, 1 il suo genitore, 2 il genitore del genitore. 1

Le colonne non hanno pannello Animation. Né i singoli tab, toggle e slide dentro gli elementi di layout. Anima invece l’elemento dentro di essi.

Se non vedi l’animazione

  • L’elemento non compare mai. Before in-animation lo nasconde finché il suo effetto non si attiva, ma Animation in è No animation. Scegli un effetto in Animation in.
  • L’effetto si è attivato una volta e si è fermato. On appear si attiva una volta per caricamento di pagina. Ricarica la pagina per rivederlo, oppure attiva Infinite per un effetto che si ripete.
  • L’effetto inizia prima che il visitatore raggiunga l’elemento. Appear boundary è alto: a 100, l’effetto inizia un’altezza di schermo prima che l’elemento scorra in vista. Impostalo a 0 nel pannello Animation.
  • Passare vicino all’elemento avvia l’effetto. Parent number è 1, quindi il genitore ascolta il puntatore. Imposta Parent number a 0.

Prossimi passi

  • Effetti hover: cambia colori, ombre o opacità mentre il puntatore resta su un elemento.
  • Sfondi: dai alla sezione animata un colore, una foto o un gradiente.
  • Layout carosello: attiva effetti On trigger ogni volta che si apre una slide.