Marquee infinito senza stacco e una variante legata allo scroll

Argomenti

Animazioni e UI Automazione n8n E-commerce e WooCommerce Estensioni Google Chrome Linux Progetti SEO e Dati Strutturati Sicurezza e Distribuzione Uncategorized

Accessibilità AI Automazione CSS GSAP Gutenberg JavaScript Linux Normativa Owl Carousel Performance PHP REST API SEO Sicurezza Windows WooCommerce WordPress

Premessa

Il marquee è la riga che scorre in loop continuo: loghi di clienti, parole chiave, un nastro di testo. Si regolano velocità, direzione e pausa al passaggio del mouse.

Il dettaglio che fa la differenza tra un marquee fatto bene e uno che “scatta” a ogni giro è il wrap senza stacco: la traccia viene duplicata a runtime, così quando la prima copia esce dallo schermo la seconda è già esattamente al suo posto e il punto di ripartenza coincide. L’occhio non vede il salto.

Come gli altri, ha la modalità “legato allo scroll”: invece di scorrere da solo, si muove in proporzione allo scroll e resta fermo quando lo scroll è fermo.

Provalo dal vivo

Una riga che scorre da sola, in loop continuo: nessuno stacco al punto di ripartenza e pausa con hover.

GSAP ★

ScrollTrigger ★

Gutenberg ★

Zero build step ★

Self-hosted ★

Accessibile ★

Legato allo scroll

Nella variante legata allo scroll la riga si muove in proporzione alla posizione di scroll e si ferma quando lo scroll è fermo. In questa modalità velocità e pausa al passaggio del mouse non si applicano.

Scorri su e giù: la riga avanza solo mentre ti muovi da destra o da sinistra.

Reveal ◆

Parallax ◆

Zoom ◆

Card stacking ◆

Scroll orizzontale ◆

Crawl 3D ◆

Reveal ◆

Parallax ◆

Zoom ◆

Card stacking ◆

Scroll orizzontale ◆

Crawl 3D ◆

Senza JavaScript o in modalità ridotta i contenuti restano nel flusso normale, possono andare a capo e restano leggibili.

Per maggiori informazioni contattami: info@davidemugnaini.it.