JavaScript Academy · Lezione

Animazioni attivate dallo scorrimento

Animi gli elementi quando entrano nell'area visibile.

Animazioni attivate dallo scorrimento è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Animazioni attivate dallo scorrimento

Un effetto comune consiste nel fare comparire gli elementi con una dissolvenza o facendoli scorrere nell'area visibile mentre l'utente raggiunge la loro posizione. Intersection Observer rende tutto semplice: aggiunga una classe CSS quando un elemento entra nella viewport e lasci che sia il CSS a gestire l'animazione.

Il lato CSS

Definisca in CSS uno stato iniziale nascosto e uno stato finale visibile. JavaScript si limita ad attivare o disattivare una classe; la transizione è interamente gestita dal CSS, che la mantiene fluida.

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

Selezionare i target

Contrassegni con una classe condivisa gli elementi che desidera animare, quindi li raccolga.

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

Creare l'observer

Utilizzi una soglia affinché l'animazione inizi quando una parte significativa dell'elemento è visibile, non quando lo è un solo pixel.

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

Aggiungere la classe

Nel callback, aggiunga la classe visible ai target intersecanti. Il CSS li farà quindi comparire nell'area visibile.

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

Animare una sola volta

Per una comparsa una tantum, smetta di osservare l'elemento dopo aver aggiunto la classe, così non verrà animato di nuovo quando l'utente scorre oltre e poi torna indietro.

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

Animare di nuovo in entrambe le direzioni

Se desidera che gli elementi eseguano un'animazione anche quando escono dall'area visibile, attivi o disattivi la classe in base a isIntersecting e continui a osservarli.

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

Avviare l'osservazione

Osservi ogni target per iniziare il monitoraggio. L'observer viene attivato mentre l'utente scorre oltre ciascun elemento.

items.forEach(el => observer.observe(el));

Sfalsare le animazioni

Crei un effetto a cascata applicando un ritardo di transizione incrementale. Può impostarlo da un attributo dati o dall'indice dell'elemento.

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

Rispettare la riduzione del movimento

Alcuni utenti preferiscono ridurre il movimento. Verifichi la media query e salti le animazioni per loro, mostrando invece immediatamente il contenuto.

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

Vantaggi in termini di prestazioni

Poiché il lavoro più pesante è affidato alle transizioni CSS e il rilevamento della visibilità al browser, le animazioni durante lo scorrimento restano fluide anche con molti elementi. Niente calcoli negli eventi di scorrimento, niente scatti.

Verifica rapida

Verifichi la Sua comprensione delle animazioni attivate dallo scorrimento.

Riepilogo

Ha realizzato animazioni attivate dallo scorrimento:

Definisca in CSS gli stati nascosto e visibile.
Osservi i target con un threshold appropriato.
Attivi o disattivi una classe all'intersezione; il CSS esegue l'animazione.
Utilizzi unobserve per le comparse una tantum.
Rispetti prefers-reduced-motion.

Ha completato la parte su Intersection Observer. Ora passeremo ai Web Workers.

Domande Frequenti

La lezione «Animazioni attivate dallo scorrimento» è gratuita?

Sì — il testo completo di «Animazioni attivate dallo scorrimento» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Animazioni attivate dallo scorrimento»?

Animi gli elementi quando entrano nell'area visibile. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Animazioni attivate dallo scorrimento»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy