JavaScript Academy · Lektion

Skrollutlösta animeringar

Animera element när de kommer in i visningsområdet.

Lektion 4 av 413 steg

Skrollutlösta animeringar är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Animering vid scrollning

En vanlig effekt är att tona in eller skjuta in element när användaren scrollar fram till dem. Intersection Observer gör detta enkelt: lägg till en CSS-klass när ett element kommer in i viewporten och låt CSS hantera animeringen.

CSS-delen

Definiera ett dolt startläge och ett synligt slutläge i CSS. JavaScript-koden växlar bara en klass; övergången sköts helt av CSS, vilket gör den mjuk.

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

Välj mål

Markera elementen som du vill animera med en gemensam klass och samla sedan in dem.

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

Skapa observeraren

Använd ett threshold-värde så att animeringen börjar när en meningsfull del av elementet är synlig, inte redan när en enda pixel visas.

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

Lägg till klassen

Lägg till klassen visible på mål som skär viewporten i callbacken. CSS animerar dem sedan in i vyn.

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

Animera en gång

För en engångsvisning slutar du observera elementet efter att klassen har lagts till, så att det inte animeras igen när användaren scrollar bort och tillbaka.

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

Animera åt båda hållen

Om du vill att elementen även ska animeras ut när de lämnar viewporten växlar du klassen baserat på isIntersecting och fortsätter att observera dem.

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

Börja observera

Observera varje mål för att börja spåra det. Observeraren anropas när användaren scrollar förbi varje mål.

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

Skapa fördröjningar i animeringarna

Skapa en kaskad genom att använda en stegvis ökande övergångsfördröjning. Du kan ange den från ett dataattribut eller utifrån elementets index.

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

Respektera minskad rörelse

Vissa användare föredrar minskad rörelse. Kontrollera mediafrågan och hoppa över animeringarna för dessa användare så att innehållet visas direkt i stället.

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

Prestandavinster

Eftersom det tunga arbetet utförs av CSS-övergångar och synlighetsdetekteringen lämnas över till webbläsaren förblir scrollanimeringar mjuka även med många element. Ingen matematik i scrollhändelser, inget hackande.

Snabbtest

Testa dina kunskaper om scrollutlösta animeringar.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har byggt scrollutlösta animeringar:

Definiera dolda och synliga tillstånd i CSS.
Observera mål med ett lämpligt threshold-värde.
Växla en klass vid skärning; CSS sköter animeringen.
Använd unobserve för engångsvisningar.
Respektera prefers-reduced-motion.

Du har slutfört Intersection Observer. Härnäst: Web Workers.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Skrollutlösta animeringar” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Skrollutlösta animeringar”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Skrollutlösta animeringar”?

Animera element när de kommer in i visningsområdet. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Skrollutlösta animeringar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy