Per animare un elemento quando entra o esce dalla schermata, scegli prima il comportamento: un’animazione a durata fissa che parte al raggiungimento di una soglia, oppure un effetto che segue continuamente lo scorrimento. Per il primo caso, usa i trigger CSS se sono supportati dai browser del progetto; altrimenti, osserva l’intersezione con JavaScript e attiva una classe CSS. Per il secondo, usa una scroll o view timeline dove disponibile. In ogni caso, il contenuto deve restare visibile e utilizzabile anche se il movimento è disattivato o la tecnica non è supportata.
Qual è la differenza tra un effetto attivato dallo scroll e uno sincronizzato allo scroll?
Un effetto scroll-triggered si avvia quando un elemento raggiunge una soglia: per esempio, entra nella viewport e comincia una dissolvenza di durata fissa. L’animazione può poi fermarsi o invertire la direzione quando l’elemento esce. La documentazione MDN descrive i trigger CSS come un modo per attivare, mettere in pausa o invertire una normale animazione CSS basata sul tempo: MDN: trigger e associazione alle timeline.
As an Amazon Associate I earn from qualifying purchases.
Un effetto scroll-driven, invece, collega il progresso dei fotogrammi chiave alla posizione di scorrimento. Se l’utente scorre avanti, l’animazione avanza; se torna indietro, regredisce. La timeline scroll() segue il progresso del contenitore di scorrimento, mentre view() segue il passaggio dell’elemento attraverso la scrollport. MDN illustra questi modelli nella guida alle animazioni CSS guidate dallo scroll.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →La distinzione determina l’implementazione: scegli un trigger per “entra e poi anima”, una timeline per “l’animazione segue il movimento”. Le due tecniche non sono intercambiabili.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Quale approccio scegliere?
| Esigenza | Approccio | Da tenere presente |
|---|---|---|
| Animazione a durata fissa al superamento di una soglia | Trigger CSS, se le proprietà necessarie sono supportate dai browser di destinazione | MDN segnala le proprietà dei trigger CSS come sperimentali; verifica la compatibilità e predisponi un fallback: documentazione MDN su animation-trigger. |
| Animazione a durata fissa con controllo JavaScript | IntersectionObserver che aggiunge o rimuove una classe CSS |
Consente di gestire l’ingresso e l’uscita con soglie configurate in JavaScript, senza controllare continuamente la geometria a ogni evento di scroll. |
| Progressione dell’animazione legata allo scorrimento | Timeline CSS scroll() o view() |
È un modello dichiarativo, ma il supporto delle singole proprietà va verificato per i browser del progetto. |
Decidi anche se l’effetto deve accadere una volta, ripetersi a ogni ingresso, invertirsi quando l’elemento esce o seguire continuamente lo scroll. Specificare questo comportamento evita di confondere una soglia con una progressione continua.
Come attivare una classe con IntersectionObserver
Per un fallback controllabile, l’osservatore può aggiungere una classe quando l’elemento interseca la viewport e rimuoverla quando non la interseca più. Il CSS definisce poi lo stato iniziale e quello animato. Questa soluzione è adatta a un ingresso e un’uscita a durata fissa; non sincronizza i fotogrammi dell’animazione con ogni movimento dello scroll.
.reveal {
opacity: 0;
transform: translateY(1rem);
transition: opacity 300ms ease, transform 300ms ease;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
entry.target.classList.toggle("is-visible", entry.isIntersecting);
}
});
document.querySelectorAll(".reveal").forEach((element) => {
observer.observe(element);
});Con questo esempio, la classe viene rimossa quando l’elemento non interseca più la viewport, così la transizione può tornare allo stato iniziale. Se invece il requisito è “mostra una volta e lascia visibile”, non rimuovere la classe all’uscita: la decisione va presa esplicitamente. Per controllare quanto deve entrare l’elemento prima dell’attivazione, configura le soglie dell’osservatore in funzione del comportamento desiderato.
Free tools Windows power users keep installed
One-click scans. No signup required.
Evita un listener scroll che interroga continuamente le dimensioni degli elementi o aggiorna gli stili a ogni frame. MDN avverte che il tracciamento degli elementi sul main thread può bloccare il rendering e causare scatti; questo non significa che ogni uso di IntersectionObserver sia automaticamente veloce, quindi valuta l’implementazione nel contesto reale: MDN: animazioni guidate dallo scroll e considerazioni sul thread principale.
Rank #3
Come rendere visibile anche la fase di uscita
Con i trigger CSS, la soglia predefinita potrebbe invertire l’animazione soltanto dopo che l’elemento è uscito del tutto. In quel caso, l’effetto di uscita avviene fuori dalla schermata e l’utente non lo vede. MDN mostra come usare intervalli personalizzati di entrata e uscita per anticipare la dissolvenza: esempio MDN sugli intervalli di attivazione.
Quando l’animazione deve essere associata a un elemento tracciato distinto, verifica inoltre l’ambito dei nomi dei trigger. In componenti ripetuti, nomi globali duplicati possono collegare l’elemento animato al trigger sbagliato se lo scope non è gestito. Definisci nomi e ambiti in modo che ogni istanza del componente si riferisca al proprio trigger.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Come rispettare la preferenza per il movimento ridotto
Il contenuto essenziale non dovrebbe diventare invisibile se l’animazione non parte. Una soluzione robusta è mostrare per impostazione predefinita testo e controlli nello stato statico, abilitando il movimento solo per chi non ha richiesto una riduzione:
.reveal {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: no-preference) {
.reveal {
opacity: 0;
transform: translateY(1rem);
transition: opacity 300ms ease, transform 300ms ease;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
}In alternativa, puoi neutralizzare esplicitamente le animazioni dentro @media (prefers-reduced-motion: reduce). La feature prefers-reduced-motion rileva una preferenza impostata a livello di sistema operativo; MDN indica che è ampiamente disponibile nei browser dal gennaio 2020 e ha aggiornato la relativa pagina il 10 giugno 2026: MDN: prefers-reduced-motion. Questo supporto ampio non implica che siano altrettanto supportate le più recenti proprietà CSS per trigger o timeline.
W3C WCAG 2.2, criterio 2.3.3 “Animation from Interactions”, stabilisce a livello AAA: “Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.” La guida WAI cita il movimento aggiunto che si attiva con lo scroll come possibile causa di nausea, vertigini o mal di testa: W3C WAI: comprensione del criterio 2.3.3. W3C documenta l’uso di prefers-reduced-motion come tecnica CSS sufficiente, non come unico modo possibile di conformarsi: tecnica W3C C39.
Per verificare l’implementazione, attiva la preferenza di movimento ridotto nel sistema operativo e controlla che il movimento non essenziale scompaia, mentre contenuti, controlli, ordine di navigazione e comprensibilità restino intatti. Se l’effetto è puramente decorativo, non deve cambiare la disponibilità del contenuto né spostare il focus.
Quick Recap
Controlli prima di pubblicare
- Definisci se l’effetto è a durata fissa o sincronizzato allo scroll, e se deve essere singolo, ripetuto o reversibile.
- Controlla il supporto delle specifiche proprietà CSS nei browser di destinazione; i trigger CSS sono indicati da MDN come sperimentali e richiedono un fallback.
- Verifica che testo e controlli siano leggibili senza animazione e con la preferenza per il movimento ridotto attiva.
- Per trigger ripetuti, controlla che nomi e ambiti colleghino ogni animazione al proprio elemento tracciato.
- Misura l’effetto nel progetto reale: non ci sono benchmark universali che permettano di promettere un miglioramento percentuale di prestazioni.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
