Marquee infinito e trascinabile in Webflow (no code)

Crea in Webflow un marquee infinito che scorre all’infinito, rallenta in modo fluido quando qualcuno ci passa sopra col mouse e permette persino ai visitatori di trascinarlo a destra e sinistra — tutto senza scrivere una singola riga di JavaScript. Questa è la versione ricostruita di una delle mie soluzioni più popolari, rimodellata da anni di feedback della community in qualcosa di più potente e più personalizzabile.

Tutto è guidato da attributi su un solo elemento, quindi dal tuo lato resta completamente no-code. Hai il controllo della direzione, la velocità per breakpoint, la pausa al passaggio del mouse opzionale, il drag opzionale, lo styling custom della slide attiva e il pieno supporto sia per slide statiche sia per il CMS di Webflow. E dato che ogni opzione arriva con un default sensato, un marquee funziona nel momento in cui lo inserisci — aggiungi attributi solo per cambiare ciò che ti interessa.

Come funziona

È un marquee Splide, configurato interamente con attributi. Sotto il cofano il componente usa la libreria carousel Splide, ma tu non la chiami mai direttamente — uno script nella sezione before-</body> della pagina legge i tuoi attributi custom e collega tutto. Questo significa che l’intera configurazione vive nel pannello impostazioni di Webflow, e nessuno degli attributi è strettamente obbligatorio: i default sensati intervengono ovunque ne lasci fuori uno.

Alcuni nomi di classe sono obbligatori. Splide cerca classi specifiche per agganciarsi: splide sul content wrapper (la radice del marquee), splide__track sul track, splide__list sulla lista e splide__slide su ogni slide. Costruire la lista come una vera unordered list (ul con elementi li) invece di semplici div mantiene il markup semantico e accessibile. La sezione intorno riceve overflow: hidden così un marquee più largo del viewport non innesca mai lo scroll orizzontale, e la lista riceve will-change: transform per mantenere l’animazione fluida.

La velocità è un numero che porta con sé la direzione. L’attributo FC-marquee-speed è misurato in pixel per frame; un valore positivo scorre da sinistra a destra, uno negativo da destra a sinistra, e il default è 1. Per una vera responsività puoi sovrascriverlo per breakpoint con FC-marquee-<breakpoint>-speed (per esempio FC-marquee-landscape-speed), lasciando sulla velocità base i breakpoint che non imposti. Il drag e la pausa al passaggio del mouse sono entrambi attivi di default — imposta FC-marquee-enable-drag o FC-marquee-enable-pause a false per disattivare l’uno o l’altro.

La slide attiva si stila da sola. Splide aggiunge una classe is-active a qualunque slide sia centrata, così non tagghi mai nulla a mano. Copia il tuo elemento slide nello style guide, aggiungi la combo class is-active e stila quello stato — riporta l’opacity al massimo, togli il grayscale, scalala leggermente e imposta position: relative con uno z-index così sta sopra le vicine quando si sovrappongono. Un tranello di layout: distanzia le slide con padding orizzontale, non con il gap di flex, perché il gap può causare glitch nell’animazione di scorrimento.

Il CMS rimappa solo le classi, e l’accessibilità ha bisogno di un’etichetta. Passare a un marquee alimentato dal CMS cambia quasi nulla a livello di struttura: metti splide__track sul list wrapper, splide__list sulla Collection List e splide__slide su ogni Collection Item, poi imposta gli stessi attributi. Infine, una regione che scorre ha bisogno di un nome accessibile — se hai un titolo visibile, aggiungi aria-labelledby all’elemento splide puntando all’id del titolo; se non c’è un titolo visibile (come nell’esempio CMS), aggiungi invece un aria-label che descrive il marquee.

Come si usa

1. Clona il progetto. Prendi il progetto clonabile in Webflow — include la struttura completa, lo styling e lo script commentato. Una guida di riferimento con tutti gli attributi sta in fondo alla pagina clonata.

2. Costruisci la struttura. Dai alla sezione intorno overflow: hidden. Dentro, aggiungi il tuo content wrapper con la classe splide, un div splide__track, una unordered list splide__list e i tuoi elementi splide__slide. Togli i bullet della lista, impostala a flex, azzera margini e padding e aggiungi will-change: transform.

3. Stila le slide e lo stato attivo. Distanzia le slide con padding orizzontale (non con il gap), e imposta i flex child a non crescere né restringersi. Nello style guide, aggiungi la combo class is-active a una copia della slide e stila l’aspetto attivo — opacity piena, niente grayscale, un leggero scale-up, position: relative e uno z-index.

4. Configura con gli attributi. Sull’elemento splide, imposta FC-marquee-speed per direzione e velocità, aggiungi FC-marquee-<breakpoint>-speed per ogni breakpoint che vuoi far girare in modo diverso, e imposta FC-marquee-enable-drag o FC-marquee-enable-pause a false se vuoi disattivare il drag o la pausa al passaggio del mouse. Salta uno qualsiasi di questi per accettare i default.

5. Etichettalo per l’accessibilità. Aggiungi aria-labelledby all’elemento splide con l’id di un titolo visibile, oppure un aria-label se non c’è un titolo da riutilizzare.

6. Passa al CMS se ti serve. Ricostruisci la stessa struttura con una Collection List: splide__track sul list wrapper, splide__list sulla Collection List, splide__slide su ogni Collection Item — poi imposta gli stessi attributi.

7. Pubblica e prova. Controlla la pagina live: il marquee dovrebbe scorrere in modo fluido, rallentare al passaggio del mouse (se non disattivato), rispondere al drag, ristilare la slide attiva e cambiare velocità tra i breakpoint.