js/observers.js — IntersectionObserver

Kodo stulpelyje — js/observers.js. Dvi funkcijos, abi paremtos IntersectionObserver.

revealOnScroll(elements) — kortelės „išnyra" (fade in) slenkant. Kiekvienai kortelei stebim, ar ji pateko į matomą sritį; kai taip — pridedam CSS klasę revealed (animaciją daro style.css).

Trys detalės, kurios skiria mėgėjišką kodą nuo tvarkingo:

observer.unobserve(entry.target) po pasirodymo — būtina. Kortelė pasirodė vieną kartą ir daugiau nesikeis; jei nenustotum stebėti, observeris „žiūrėtų" ją amžinai ir be reikalo naudotų resursus.
prefers-reduced-motion — jei vartotojas sistemoje išjungęs animacijas (dėl pykinimo nuo judesio), iškart pridedam revealed be jokio „išnyrimo". Prieinamumas, ne pasirinkimas.
threshold ir rootMargin — kada tiksliai suveikti (kai matoma 10%, bet 40px prieš pasiekiant apačią).

onReachEnd(sentinel, onReach) parodo, kaip tuo pačiu observeriu daromas begalinis slinkimas: pastatai nematomą „sargybinį" elementą sąrašo gale, ir kai jis pasirodo, kvieti „krauti daugiau". Taip veikia kiekvienas modernus srautas.

Patikrink. Su tikromis nuotraukomis iš 4 pamokos:

1. Galerija rodo kortelių tinklelį (naujausia viršuje).
2. Slenkant žemyn kortelės sklandžiai „išnyra".
3. Nuotraukos toli apačioje atsisiunčia tik prisiartinus (loading="lazy").

Spąstai (amžinas stebėjimas). Pamiršk unobserve() — ir observeris toliau kviečiamas kiekvienai kortelei per kiekvieną slinkimą, nors jos jau seniai pasirodė. Puslapis lėtėja be aiškios priežasties. Taisyklė: kai stebėjimo tikslas pasiektas — unobserve(). (Tas pats principas kaip įvykių klausytojų valymas.)

observers.js SUKURTI

Sukurk šį failą kataloge js/

// Browser observer APIs — modern JavaScript that replaces old scroll-event hacks.
//
// The old way to detect "is this element visible?" was to listen to scroll
// events and call getBoundingClientRect() on every pixel of scrolling. That
// runs on the main thread, hundreds of times a second, and janks the page.
//
// IntersectionObserver does the same job asynchronously, off the main thread,
// and only tells you when something ACTUALLY crosses the threshold.

/**
 * Fade elements in as they scroll into view.
 * Notice we UNOBSERVE after the first reveal — otherwise the observer keeps
 * firing forever for elements that will never change again.
 */
export function revealOnScroll(elements) {
  // Respect the user's motion preference — some people get motion sickness.
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    elements.forEach(el => el.classList.add('revealed'));
    return;
  }

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('revealed');
          observer.unobserve(entry.target);   // job done — stop watching
        }
      });
    },
    {
      threshold: 0.1,             // fire when 10% of the element is visible
      rootMargin: '0px 0px -40px 0px',   // ...but 40px before it reaches the bottom
    }
  );

  elements.forEach(el => observer.observe(el));
  return observer;
}

/**
 * Infinite scroll: call `onReach` when a sentinel element scrolls into view.
 * This is how "load more" works on every modern feed.
 */
export function onReachEnd(sentinel, onReach) {
  const observer = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) onReach();
    },
    { rootMargin: '200px' }      // start loading 200px BEFORE the user gets there
  );

  observer.observe(sentinel);
  return observer;
}