JavaScript Academy · Lekcja

Animacje wyzwalane przewijaniem

Proszę animować elementy, gdy pojawiają się w obszarze widoku.

Animacje wyzwalane przewijaniem to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Animowanie podczas przewijania

Popularny efekt polega na płynnym pojawianiu się lub wysuwaniu elementów w momencie, gdy użytkownik przewija do nich stronę. Intersection Observer upraszcza to zadanie: po wejściu elementu do obszaru widoku należy dodać klasę CSS, a animację pozostawić CSS-owi.

Część dotycząca CSS

W CSS należy zdefiniować ukryty stan początkowy i widoczny stan końcowy. JavaScript jedynie przełącza klasę, a przejście jest realizowane wyłącznie przez CSS, co zapewnia płynność.

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

Wybieranie elementów docelowych

Należy oznaczyć wspólną klasą elementy, które mają być animowane, a następnie je zebrać.

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

Tworzenie obserwatora

Należy użyć wartości threshold, aby animacja rozpoczynała się, gdy widoczna jest znacząca część elementu, a nie tylko jeden piksel.

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

Dodawanie klasy

W callbacku należy dodać klasę visible do przecinających się elementów docelowych. CSS nada im wtedy animację pojawiania się.

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

Animowanie tylko raz

W przypadku jednorazowego pojawienia się elementu po dodaniu klasy należy zakończyć jego obserwowanie za pomocą unobserve, aby nie animował się ponownie po przewinięciu w górę i z powrotem.

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

Ponowne animowanie w obu kierunkach

Jeśli elementy mają również animować się podczas opuszczania obszaru widoku, należy przełączać klasę na podstawie isIntersecting i kontynuować obserwowanie.

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

Rozpoczynanie obserwacji

Należy rozpocząć obserwowanie każdego elementu docelowego. Obserwator wywołuje callback, gdy użytkownik przewija obok kolejnych elementów.

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

Rozłożenie animacji w czasie

Efekt kaskadowy można utworzyć, stosując stopniowo zwiększane opóźnienie przejścia. Można je ustawić na podstawie atrybutu danych lub indeksu elementu.

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

Uwzględnianie ograniczenia ruchu

Niektórzy użytkownicy preferują ograniczoną liczbę animacji. Należy sprawdzić zapytanie media i pominąć animacje dla tych użytkowników, wyświetlając treści od razu.

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

Korzyści wydajnościowe

Ponieważ ciężka praca jest wykonywana przez przejścia CSS, a wykrywanie widoczności przekazano przeglądarce, animacje podczas przewijania pozostają płynne nawet przy wielu elementach. Nie ma obliczeń obsługujących zdarzenia przewijania ani zacięć.

Szybkie sprawdzenie

Sprawdź zrozumienie animacji wyzwalanych przewijaniem.

Podsumowanie

Zbudował Pan/Zbudowała Pani animacje wyzwalane przewijaniem:

Ukryty i widoczny stan są zdefiniowane w CSS.
Elementy docelowe są obserwowane za pomocą odpowiedniej wartości threshold.
Po przecięciu przełączana jest klasa, a animację wykonuje CSS.
unobserve służy do jednorazowego pojawiania się elementów.
Uwzględniana jest wartość prefers-reduced-motion.

To koniec części dotyczącej Intersection Observer. Następnie zajmiemy się Web Workers.

Często zadawane pytania

Czy lekcja „Animacje wyzwalane przewijaniem” jest bezpłatna?

Tak — pełny tekst „Animacje wyzwalane przewijaniem” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Animacje wyzwalane przewijaniem”?

Proszę animować elementy, gdy pojawiają się w obszarze widoku. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Animacje wyzwalane przewijaniem”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy