JavaScript Academy · Oppitunti

Vierityksen käynnistämät animaatiot

Animoikaa elementtejä niiden tullessa näkyviin.

Oppitunti 4/413 vaihetta

Vierityksen käynnistämät animaatiot on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Animointi vieritettäessä

Yleinen tehoste on häivyttää tai liu'uttaa elementit näkyviin, kun käyttäjä vierittää niiden kohdalle. Intersection Observer tekee tästä siistiä: lisää CSS-luokka, kun elementti tulee näkymäalueelle, ja anna CSS:n hoitaa animaatio.

CSS-puoli

Määritä CSS:ssä piilotettu alkutila ja näkyvä lopputila. JavaScript vain vaihtaa luokkaa; siirtymä toteutetaan kokonaan CSS:llä, mikä pitää animaation sujuvana.

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

Kohteiden valitseminen

Merkitse animoitavat elementit yhteisellä luokalla ja kerää ne sen jälkeen.

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

Tarkkailijan luominen

Käytä kynnysarvoa, jotta animaatio alkaa, kun merkittävä osa elementistä on näkyvissä eikä vasta yhden pikselin kohdalla.

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

Luokan lisääminen

Lisää callbackissa visible-luokka leikkaaviin kohteisiin. CSS animoi ne tämän jälkeen näkyviin.

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

Animointi vain kerran

Jos haluat paljastaa elementin vain kerran, lopeta sen tarkkailu luokan lisäämisen jälkeen. Näin animaatio ei käynnisty uudelleen, kun elementin ohi vieritetään ja sen kohdalle palataan.

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

Animointi uudelleen molempiin suuntiin

Jos haluat elementtien animoituvan myös poistuessaan näkyvistä, vaihda luokkaa isIntersecting-arvon perusteella ja jatka tarkkailua.

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

Tarkkailun aloittaminen

Aloita seuranta tarkkailemalla jokaista kohdetta. Tarkkailija suorittaa callbackin, kun käyttäjä vierittää kunkin kohteen kohdalle.

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

Animaatioiden porrastaminen

Luo porrastus käyttämällä asteittain kasvavaa siirtymän viivettä. Viiveen voi määrittää data-attribuutista tai elementin indeksistä.

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

Vähennetyn liikkeen huomioiminen

Jotkut käyttäjät suosivat vähäisempää liikehdintää. Tarkista media query ja ohita animaatiot heidän kohdallaan näyttämällä sisältö heti.

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

Suorituskykyhyödyt

Koska raskas työ tehdään CSS-siirtyminä ja näkyvyyden tunnistus on siirretty selaimen tehtäväksi, vieritysanimaatiot pysyvät sujuvina myös silloin, kun elementtejä on paljon. Vieritystapahtumien laskentaa ei tarvita eikä sivu nyi.

Pikatesti

Testaa, miten hyvin ymmärrät vierityksen käynnistämät animaatiot.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Rakensit vierityksen käynnistämät animaatiot:

Määritä piilotetut ja näkyvät tilat CSS:ssä.
Tarkkaile kohteita järkevällä threshold-arvolla.
Vaihda luokkaa leikkauskohdassa; CSS hoitaa animaation.
Käytä unobserve-kutsua kertaluonteisiin paljastuksiin.
Huomioi prefers-reduced-motion.

Intersection Observer on nyt käsitelty. Seuraavaksi tutustumme Web Workereihin.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Vierityksen käynnistämät animaatiot” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Vierityksen käynnistämät animaatiot”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Vierityksen käynnistämät animaatiot”?

Animoikaa elementtejä niiden tullessa näkyviin. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Vierityksen käynnistämät animaatiot”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy