JavaScript Academy · Les

Door scrollen geactiveerde animaties

Animeer elementen wanneer ze in beeld komen.

Les 4 van 413 stappen

Door scrollen geactiveerde animaties is een gratis JavaScript Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Animeren bij scrollen

Een populair effect is om elementen te laten vervagen of in beeld te laten schuiven wanneer de gebruiker ernaartoe scrollt. Intersection Observer maakt dit overzichtelijk: voeg een CSS-klasse toe wanneer een element in de viewport komt en laat CSS de animatie afhandelen.

De CSS-kant

Definieer in CSS een verborgen beginstatus en een zichtbare eindstatus. JavaScript wisselt alleen een klasse; de overgang bestaat volledig uit CSS, waardoor die soepel blijft.

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

Doelen selecteren

Markeer de elementen die je wilt animeren met een gedeelde klasse en verzamel ze daarna.

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

De observer maken

Gebruik een drempelwaarde zodat de animatie start wanneer een betekenisvol deel van het element zichtbaar is, en niet al bij één pixel.

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

De klasse toevoegen

Voeg in de callback de klasse visible toe aan doelen die zichtbaar worden. CSS animeert ze vervolgens in beeld.

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

Eenmalig animeren

Voor een eenmalige onthulling stop je met het observeren van het element nadat je de klasse hebt toegevoegd. Zo animeert het niet opnieuw wanneer je er vanaf en weer naartoe scrollt.

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

In beide richtingen opnieuw animeren

Als je wilt dat elementen ook animeren wanneer ze uit beeld verdwijnen, wissel je de klasse op basis van isIntersecting en blijf je observeren.

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

Observeren starten

Observeer elk doel om het volgen te starten. De observer wordt aangeroepen terwijl de gebruiker langs elk doel scrollt.

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

Animaties trapsgewijs laten verlopen

Maak een trapsgewijs effect door een oplopende overgangsvertraging toe te passen. Je kunt die instellen vanuit een data-attribuut of de index van het element.

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

Minder beweging respecteren

Sommige gebruikers geven de voorkeur aan minder beweging. Controleer de mediaquery en sla animaties voor hen over, zodat de inhoud meteen wordt weergegeven.

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

Prestatievoordelen

Omdat het zware werk door CSS-overgangen wordt gedaan en de zichtbaarheidsdetectie aan de browser wordt overgelaten, blijven scrollanimaties soepel, zelfs met veel elementen. Geen berekeningen bij scrollgebeurtenissen en geen haperingen.

Korte toets

Toets je begrip van animaties die door scrollen worden gestart.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt animaties gebouwd die door scrollen worden gestart:

Definieer verborgen en zichtbare statussen in CSS.
Observeer doelen met een verstandige threshold.
Wissel bij een intersectie een klasse; CSS voert de animatie uit.
Gebruik unobserve voor eenmalige onthullingen.
Respecteer prefers-reduced-motion.

Je hebt Intersection Observer afgerond. Vervolgens bekijken we Web Workers.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Door scrollen geactiveerde animaties” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Door scrollen geactiveerde animaties”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Door scrollen geactiveerde animaties”?

Animeer elementen wanneer ze in beeld komen. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Door scrollen geactiveerde animaties”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy