---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/design/animation-tab'
title: 'Anima gli elementi allo scorrimento, al passaggio del mouse o al clic | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T03:01:00+00:00'
updated: '2026-10-24T06:23:23+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  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.
tags:
  - Ontwerpgidsen
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T06:23:23+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Anima gli elementi allo scorrimento, al passaggio del mouse o al clic'
      description: |-
        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.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T03:01:00+0000'
      dateModified: '2026-10-24T06:23:23+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/design/animation-tab'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/design/animation-tab'
      description: |-
        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.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/it'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: it
---
[Help Center](/it/hc)/[Documentation](/it/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Anima gli elementi allo scorrimento, al passaggio del mouse o al clic.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [Fai reagire gli elementi al passaggio del mouse](/it/hc/documentation/learn-dxpr-builder/design/hover-effects)
- [Riempi una sezione di colore, foto o gradiente](/it/hc/documentation/learn-dxpr-builder/design/backgrounds)
- [Aggiunta di un layout carosello](/it/hc/documentation/learn-dxpr-builder/layout/carousel-layout)

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](/it/hc/documentation/learn-dxpr-builder/design/hover-effects): cambia colori, ombre o opacità mentre il puntatore resta su un elemento.
- [Sfondi](/it/hc/documentation/learn-dxpr-builder/design/backgrounds): dai alla sezione animata un colore, una foto o un gradiente.
- [Layout carosello](/hc/documentation/learn-dxpr-builder/layout/carousel-layout): attiva effetti **On trigger** ogni volta che si apre una slide.