scroll-driven-animations | frontendfacile.it

7 ottobre 2026

Crossfade e zoom tra scene “alla GTA” con solo CSS (Scroll-driven animations)

Ricreiamo un effetto di scroll cinematografico: sfondi full-bleed che si sovrappongono, dissolvenze incrociate tra scene, un leggero zoom “in uscita” e un velo colorato che maschera lo stacco. Il tutto con CSS, usando Scroll-driven Animations (view-timeline, animation-timeline, animation-range).

29 settembre 2026

Effetti di entrata e uscita guidati dallo scroll: un approccio moderno, robusto e accessibile

Implementare animazioni legate allo scroll è facile… farle bene (senza calcoli fragili e senza rompere layout e accessibilità) un po’ meno. Vediamo un’impostazione moderna: due animazioni separate per entrata e uscita, legate a range dedicati della scroll timeline, con feature detection e fallback via Intersection Observer.

26 agosto 2026

Animazioni “scroll-trigger” solo con CSS (e che non si riavviano): una tecnica moderna e pulita

Creare animazioni attivate dallo scroll di solito fa pensare subito a JavaScript. In realtà oggi CSS permette un approccio sorprendentemente solido: puoi rilevare l’ingresso in viewport, far partire un’animazione una sola volta e mantenerne lo stato finale anche quando l’elemento esce dallo schermo. In più, puoi aggiungere uno stagger intelligente in una griglia responsive e gestire tutto in progressive enhancement con @supports e prefers-reduced-motion.