Tyhjä ruutu on ensimmäinen asia, jonka kävijä näkee sivun latautuessa. Mutta he voisivat nähdä sen sijaan pehmeästi esiin tulevia sisältölohkoja.

Vierityksen laukaisema animaatio ei ole enää pelkkää koristelua. Se ohjaa huomiota, määrittää vierityksen rytmin ja herättää laskeutumissivut eloon. Mutta työkalun valitseminen summamutikassa tarkoittaa riskiä suorituskyvyn heikkenemisestä ja asettelun hajoamisesta mobiilissa.

Alla on kolme toimivaa lähestymistapaa vieritysanimaatioon vuonna 2026, aina natiivista JavaScriptistä ilman ainuttakaan riippuvuutta valmiisiin kirjastoihin, joissa on kymmeniä efektejä. Bonuksena pureudumme Revealatorin kohtalokkaaseen puutteeseen, liitännäiseen, joka oli aikoinaan suosittu mutta jämähti vuoteen 2020.

💡 Nopea yleiskatsaus:

• Ymmärrät, miten Intersection Observer API mahdollistaa paljastusanimaatiot ilman jQueryä tai kolmannen osapuolen kirjastoja
• Tutustut AOS:ään, suosituimpaan kirjastoon (28 000 tähteä GitHubissa), sen luokkiin, attribuutteihin ja 5 minuutin asennukseen
• Vertailet ScrollReveal- ja AOS-kirjastoja oppimiskäyrän, pakettikoon ja joustavuuden perusteella
• Opit, miksi Revealator-liitännäistä ei voi enää käyttää uusissa projekteissa
• Saat vertailutaulukon ja valmiin valinnan tehtävääsi varten

Intersection Observer API, natiivi lähestymistapa ilman riippuvuuksia

Selainrajapinta, joka seuraa, milloin elementti leikkaa näkymäalueen. Ei jQueryä, ei polyfillejä moderneille selaimille. Tuki kattaa yli 97% maailmanlaajuisesta yleisöstä Can I Usen mukaan.

Periaate on yksinkertainen: luot observerin, kiinnität sen kohde-elementteihin ja saat takaisinkutsun, kun elementti saapuu näkyvälle alueelle. Sillä hetkellä lisäät CSS-luokan, jossa on animaatio.

1
const observer = new IntersectionObserver((entries) => {
2
  entries.forEach(entry => {
3
    if (entry.isIntersecting) {
4
      entry.target.classList.add('visible');
5
    }
6
  });
7
}, { threshold: 0.1 });
8
 
9
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

Yllä oleva koodi seuraa kaikkia elementtejä, joilla on .reveal-luokka. Kun elementti saapuu näkymäalueelle (threshold-arvo asetetaan koodissa), animaatio käynnistyy. Määrittelet sen CSS:n itse, mitkä tahansa @keyframes-animaatiot haluatkin.

1
.reveal {
2
  opacity: 0;
3
  transform: translateY(30px);
4
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
5
}
6
 
7
.reveal.visible {
8
  opacity: 1;
9
  transform: translateY(0);
10
}

Lähestymistavan hyvät puolet: nolla riippuvuutta, ei pakettikoon kasvua, täysi hallinta liipaisimista ja CSS-animaatiosta. Sopii projekteihin, joissa jokaisella kilotavulla on merkitystä ja suorituskyky heikoilla laitteilla on kriittistä.

Huonot puolet: sinun on kirjoitettava oma kääre uudelleenkäynnistystä, viiveitä ja porrastettuja animaatioita varten. Kirjastot tekevät tämän valmiina.

Puhtaaseen JS-projektiin, jossa on korkeat nopeusvaatimukset, valitse Intersection Observer. Jos et halua kirjoittaa käärettä käsin, katso AOS:ää.

AOS (Animate on Scroll), kirjasto, jolla on 28 000 tähteä

AOS on de facto -standardi vieritysanimaatioille web-kehityksessä. GitHub-repositoriossa on yli 28 000 tähteä ja 2 600 forkkausta. Kirjasto on niin yksinkertainen, että käyttöönotto kestää tasan kaksi minuuttia.

Yhdistä CSS ja JS joko CDN:n tai npm:n kautta:

1
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
2
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
3
<script>AOS.init();</script>

Sen jälkeen mikä tahansa elementti, jolla on data-aos-attribuutti, herää eloon vieritettäessä:

1
<div data-aos="fade-up">Этот блок выплывет снизу</div>
2
<div data-aos="zoom-in" data-aos-delay="300">Этот — с задержкой 300 мс</div>

Sisäänrakennettuja efektejä on yli 30: fade, flip, zoom, slide kaikkiin suuntiin. Voit hallita kestoa (data-aos-duration), viivettä (data-aos-delay), siirtymää (data-aos-offset) ja jopa ankkuria (data-aos-anchor), jolloin yhden elementin animaatio on sidottu toisen ilmestymiseen.

Hyvät puolet:

• 5 minuutin käyttöönotto, kolme riviä koodia ja data-attribuutteja
• 30+ sisäänrakennettua easing-funktiota, porrastetut ja ankkurianimaatiot
• Aktiivinen repositorio, bugit korjataan, avoimia tikettejä ei ole myöhässä

Huonot puolet:

• Riippuvuus tekijään: projekti on elossa, mutta päivitykset ovat harvinaisia (viimeisin julkaisu on 2.3.1)
• Puhdas CSS-lähestymistapa: ei ohjelmallista logiikkaa (ehdolliset animaatiot, dynaamiset parametrit)

Käytä AOS:ää, kun: tarvitset kehitysnopeutta, yli 30 efektiä valmiina, animaatiota tyypilliselle laskeutumissivulle, jossa on tusina lohkoa.

ScrollReveal, JavaScript-painotteinen vaihtoehto

ScrollReveal on saman luokan kirjasto, jolla on yli 22 000 tähteä GitHubissa. Toisin kuin AOS, sitä ohjataan JavaScriptistä, ei data-attribuuteilla.

1
ScrollReveal().reveal('.block', {
2
  delay: 200,
3
  distance: '50px',
4
  origin: 'bottom',
5
  duration: 600,
6
  reset: true
7
});

Keskeinen ero AOS:ään: täysi API JavaScriptissä. Muutat animaation parametreja ohjelmallisesti, lataat ne palvelimelta, sidot ne ehtoihin. Monimutkaiseen logiikkaan tämä on ratkaisu.

Hyvät puolet:

• JS-ohjaus: voit hallita animaatiota mistä tahansa koodista
• reset: true, toistuva animaatio vieritettäessä ylös ja takaisin alas
• Tuki minkä tahansa monimutkaisuuden CSS-valitsimille

Huonot puolet:

• Hieman jyrkempi oppimiskäyrä kuin AOS:ssä, ei visuaalista data-attribuutti-lähestymistapaa
• Vähemmän sisäänrakennettuja easing-funktioita

Valinta AOS:n ja ScrollRevealin välillä kiteytyy yhteen asiaan: data-attribuutit vai JavaScript. Tyypilliselle laskeutumissivulle valitse AOS. Single Page Applicationiin, jossa animaatio on osa liiketoimintalogiikkaa, valitse ScrollReveal.

Revealator: historiallinen huomio

Revealator on QODIOn jQuery-liitännäinen, joka vuosina 2016-2018 oli yksinkertainen ratkaisu lohkojen animointiin: liität luokkia kuten revealator-fade, revealator-slideup ja revealator-zoomout, ja elementit ilmestyvät vieritettäessä. Demot jQueryScriptissä toimii edelleen, efektit voi nähdä.

Ongelma on, että GitHub-repositorio arkistoitiin huhtikuussa 2023 merkinnällä "DEPRECATED, no longer actively maintained." Viimeinen merkityksellinen commit oli joulukuussa 2020. Liitännäinen vetää jQueryn riippuvuudekseen maailmassa, jossa 97% sivustoista ei enää käytä jQueryä uusiin ominaisuuksiin. Tukea ei ole, bugeja ei korjata, moderneja selainrajapintoja ei käytetä.

Älä käytä Revealatoria uusissa projekteissa. Jos löydät sen vanhasta koodipohjasta, siirry Intersection Observeriin tai AOS:ään. Tehtävä on sama, mutta suorituskyky ja ylläpidettävyys ovat kertaluokkaa korkeammat.

Lähestymistapojen vertailu

Nopealle laskeutumissivulle AOS riittää. Single Page Applicationiin, jossa on ohjelmallinen ohjaus, ScrollReveal. Projektiin, jossa on tiukat suorituskykyvaatimukset ja nollatoleranssi riippuvuuksille, puhdas Intersection Observer. Revealator ei ole kisassa mukana.

Katso Kevin Powellin 6 minuutin purku, hän näyttää vierityksen laukaiseman paljastusanimaation puhtaalla CSS:llä ja Intersection Observerilla, ilman ainuttakaan kirjastoa.

⁉️🤔 Yleisiä kysymyksiä

Miksi käyttää paljastusanimaatiota laskeutumissivulla, eikö se hidasta sivustoa?

Oikein tehty animaatio ei hidasta mitään. Intersection Observer toimii asynkronisesti pääsäikeen ulkopuolella, CSS-animaatiot renderöidään näytönohjaimella transform- ja opacity-ominaisuuksien kautta, eikä uudelleenpiirtoa laukaista. Ongelmat alkavat, kun animoit width-, height- tai left/top-ominaisuuksia, se nykii asettelua. Kirjastot kuten AOS animoivat vain transform- ja opacity-ominaisuuksia. Pääsääntö on: älä animoi geometriaa.

Voiko AOS:ää käyttää sivustolla, jossa on raskas JS-kehys, React tai Vue?

Voi, mutta yhdellä varauksella: AOS skannaa DOM:in alustuksessa eikä näe elementtejä, jotka lisätään reaktiivisesti AOS.init()-kutsun jälkeen. Ratkaisu on kutsua AOS.refresh() komponentin mounttauksen jälkeen. Reactissa se on useEffect, Vuessa mounted. Syvälliseen tilan integrointiin ScrollReveal on kätevämpi, koska sitä hallitaan puhtaasti JavaScriptistä.

Miten Intersection Observer on parempi kuin vanha lähestymistapa jQueryn scroll-tapahtumilla?

jQuery-lähestymistapa kiinnittää kuuntelijan scroll-tapahtumaan, tapahtuma laukeaa kymmeniä kertoja sekunnissa, jokainen kutsu lukee elementin geometrian (laukaisee reflow'n), sivusto lagaa. Intersection Observer toimii asynkronisesti, takaisinkutsu kutsutaan kerran todellisen näkyvyyden muutoksen yhteydessä. Sivulla, jossa on 50 animoitua lohkoa, suorituskykyero on noin 40-kertainen Observerin hyväksi WebKit-kehittäjien testien mukaan.

Mitä tehdä, jos animaatio nykii mobiilissa?

Tarkista ensin, että animoit vain transform- ja opacity-ominaisuuksia. Toiseksi, lisää will-change: transform, opacity elementtiin ennen animaation alkua ja poista se jälkeenpäin. Kolmanneksi, heikoilla laitteilla vähennä duration 200-300 ms:iin: nopea animaatio koetaan sulavammaksi kuin nykivä hidas animaatio. Laitteilla, joiden näytön virkistystaajuus on 60 Hz, alle 300 ms:n animaatio ei ehdi väsyttää silmää.

Voiko paljastusanimaation tehdä kokonaan ilman JavaScriptiä?

Osittain, CSS Scroll-driven Animations -määrityksen kautta, mutta spesifikaatio on edelleen kokeellinen: se toimii Chromessa 115+, mutta ei Firefoxissa tai Safarissa. Tuotantoon tarvitset joko Intersection Observerin (natiivi, ilman kirjastoja) tai polyfillin. Tuotantosivustolle vuonna 2026 minimaalinen vaihtoehto on Intersection Observer ilman kirjastoja: natiivi JS, nolla riippuvuutta, täysi tuki.

Mikä lähestymistapa valita laskeutumissivulle vuonna 2026

Jos teet tyypillistä laskeutumissivua, jossa on 5-10 lohkoa ja "eilen" deadline, AOS. Kolme riviä koodia, 30 efektiä, vaikea mokata.

Jos kyseessä on Single Page Application Reactilla/Vuella ja animaatio on sidottu liiketoimintalogiikkaan, ScrollReveal. Ohjelmallinen ohjaus korvaa ylimääräiset 5 minuuttia asennusaikaa.

Jos suorituskykybudjetti on tiukka ja suunnittelija piirsi uniikit animaatiot, Intersection Observer. Nolla kilotavua, täysi CSS-hallinta, maksiminopeus.

Älä käytä Revealatoria. Liitännäinen oli hyvä vuonna 2016, mutta maailma on mennyt eteenpäin.

Kokeile AOS:ää testisivulla, npm install aos --save tai CDN 5 minuutissa. Tunne ero staattisen laskeutumissivun ja sivun välillä, jossa lohkot heräävät eloon vieritettäessä. Kirjoita kommentteihin, minkä lähestymistavan valitsit ja miksi.