Tühi ekraan on esimene asi, mida külastaja saidi laadimise ajal näeb. Aga selle asemel võiks ta näha sujuvalt ilmuvaid sisuplokke.

Kerimisel käivituv animatsioon pole enam pelgalt dekoratiivne. See suunab tähelepanu, määrab kerimise rütmi ja äratab maandumislehed ellu. Aga suvalise tööriista valimine tähendab riski jõudlusele ja küljenduse purunemist mobiilis.

Allpool on kolm toimivat lähenemist kerimisanimatsiooniks aastal 2026, alates natiivsest JavaScriptist ilma ühegi sõltuvuseta kuni valmis teekideni, millel on kümneid efekte. Boonusena analüüsime Revealatori saatuslikku viga, pistikprogrammi, mis oli kunagi populaarne, kuid jäi aastasse 2020 kinni.

💡 Kiire ülevaade:

• Saad aru, kuidas Intersection Observer API võimaldab ilmumisanimatsioone ilma jQuery või kolmandate osapoolte teekideta
• Uurid AOS-i, kõige populaarsemat teeki (28 000 tähte GitHubis), selle klasse, atribuute ja 5-minutilist seadistust
• Võrdled ScrollReveal-i ja AOS-i õpikõvera, paki suuruse ja paindlikkuse järgi
• Saad teada, miks Revealator-it ei saa enam uutes projektides kasutada
• Saad võrdlustabeli ja valmis valiku oma ülesande jaoks

Intersection Observer API, natiivne lähenemine ilma sõltuvusteta

Brauseri API, mis jälgib, millal element lõikub vaateavaga. Pole jQuery-t, pole polüfille tänapäevastele brauseritele. Tugi ulatub 97%+ globaalse vaatajaskonnani Can I Use andmetel.

Põhimõte on lihtne: loob vaatleja, kinnitab selle sihtelementide külge ja saab tagasikutse, kui element siseneb nähtavasse alasse. Sel hetkel lisab elemendile animatsiooniga CSS-klassi.

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));

Ülaltoodud kood jälgib kõiki .reveal klassiga elemente. Kui element siseneb vaateavasse (koodis on määratud threshold väärtus), käivitub animatsioon. Selle jaoks määratled CSS-i ise, mis tahes @keyframes-i, mis sulle meeldib.

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ähenemise plussid: null sõltuvust, paki suurus ei kasva, täielik kontroll trigerite ja CSS-animatsiooni üle. Sobib projektidele, kus iga kilobait loeb ja jõudlus nõrkadel seadmetel on kriitiline.

Miinused: pead ise kirjutama ümbrise uuesti käivitamiseks, viivitusteks ja kaskaadanimatsioonideks. Teegid teevad seda kohe karbist võttes.

Puhta JS-projekti jaoks, kus on kõrged kiirusnõuded, vali Intersection Observer. Kui sa ei taha ümbrist käsitsi kirjutada, vaata AOS-i.

AOS (Animate on Scroll), 28 000 tähega teek

AOS on de facto standard kerimisanimatsioonidele veebiarenduses. GitHubi repositooriumil on 28 000+ tähte ja 2600 haru. Teek on nii lihtne, et seadistamine võtab täpselt kaks minutit.

Ühenda CSS ja JS, kas CDNi või npm-i kaudu:

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>

Pärast seda ärkab iga data-aos atribuudiga element kerimisel ellu:

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

Saadaval on üle 30 sisseehitatud efekti: fade, flip, zoom, slide igas suunas. Sa kontrollid kestust (data-aos-duration), viivitust (data-aos-delay), nihet (data-aos-offset) ja isegi ankrut (data-aos-anchor), kui ühe elemendi animatsioon on seotud teise ilmumisega.

Plussid:

• 5-minutiline seadistus, kolm koodirida ja data-atribuudid
• 30+ sisseehitatud leevendusfunktsiooni, kaskaad- ja ankuranimatsioonid
• Aktiivne repositoorium, vead suletakse, ühtegi üle tähtaja probleemi pole

Miinused:

• Sõltuvus autorist: projekt on elus, kuid uuendused on harvad (viimane väljalase on 2.3.1)
• Puhas CSS-lähenemine: puudub programmeeritav loogika (tingimuslikud animatsioonid, dünaamilised parameetrid)

Kasuta AOS-i, kui: vajad arenduskiirust, 30+ efekti karbist võttes, animatsiooni tüüpilisel tosina plokiga maandumislehel.

ScrollReveal, JavaScripti-keskne alternatiiv

ScrollReveal on samasse klassi kuuluv teek, millel on 22 000+ tähte GitHubis. Erinevalt AOS-ist juhitakse seda JavaScriptist, mitte data-atribuutidest.

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

Peamine erinevus AOS-ist: täielik API JS-is. Muudad animatsiooni parameetreid programmeeritavalt, laed need serverist, seod tingimustega. Keerulise loogika puhul lahendab see probleemi.

Plussid:

• JS-i juhtimine: saad animatsiooni hallata ükskõik kust koodist
• reset: true, korduv animatsioon üles ja tagasi alla kerides
• Mis tahes keerukusega CSS-selektorite tugi

Miinused:

• Veidi järsem õpikõver kui AOS-il, puudub visuaalne data-atribuudi lähenemine
• Vähem sisseehitatud leevendusfunktsioone

Valik AOS-i ja ScrollReveal-i vahel taandub ühele asjale: data-atribuudid või JavaScript. Tüüpilise maandumislehe jaoks vali AOS. SPA jaoks, kus animatsioon on osa äriloogikast, vali ScrollReveal.

Revealator: ajalooline märkus

Revealator on QODIO jQuery pistikprogramm, mis aastatel 2016-2018 oli lihtne lahendus plokkide animeerimiseks: lisad klassid nagu revealator-fade, revealator-slideup ja revealator-zoomout ning elemendid ilmuvad kerimisel. Demoleht jQueryScriptis töötab endiselt, saad efekte näha.

Probleem on selles, et GitHubi repositoorium arhiveeriti 2023. aasta aprillis märkega „DEPRECATED, no longer actively maintained". Viimane sisuline commit oli 2020. aasta detsembris. Pistikprogramm tõmbab jQuery sõltuvusena maailmas, kus 97% saitidest ei kasuta enam jQuery-t uute funktsioonide jaoks. Puudub tugi, vigu ei parandata, tänapäevaseid brauseri API-sid ei kasutata.

Ära kasuta Revealator-it uutes projektides. Kui leiad selle vanast koodibaasist, migreeri Intersection Observer-ile või AOS-ile. Ülesanne on sama, kuid jõudlus ja hooldatavus on suurusjärgu võrra kõrgemad.

Lähenemiste võrdlus

Kiire maandumislehe jaoks piisab AOS-ist. SPA jaoks, kus on vaja programmeeritavat juhtimist, ScrollReveal. Projekti jaoks, kus on ranged jõudlusnõuded ja null tolerants sõltuvuste suhtes, puhas Intersection Observer. Revealator ei ole konkurentsis.

Vaata Kevin Powelli 6-minutilist analüüsi, ta näitab kerimisel käivituvat ilmumisanimatsiooni puhta CSS-i ja Intersection Observer-iga, ilma ühegi teegita.

⁉️🤔 Levinud küsimused

Miks kasutada ilmumisanimatsiooni maandumislehel, kas see ei aeglusta saiti?

Õigesti tehtud animatsioon ei aeglusta. Intersection Observer töötab asünkroonselt väljaspool peamist lõime, CSS-animatsioonid renderdatakse GPU-l transform ja opacity kaudu, ühtegi ümberjoonistust ei käivitata. Probleemid algavad, kui animeerid width, height või left/top omadusi, see raputab küljendust. Sellised teegid nagu AOS animeerivad ainult transform ja opacity omadusi. Peamine reegel on: ära animeeri geomeetriat.

Kas AOS-i saab kasutada saidil, kus on raske JS-raamistik, React või Vue?

Saab, kuid mööndusega: AOS skannib DOM-i initsialiseerimisel ega näe elemente, mis lisatakse reaktiivselt pärast AOS.init() käivitamist. Lahendus on kutsuda AOS.refresh() pärast komponendi monteerimist. React-is on selleks useEffect, Vue-s mounted. Oleku süvaintegratsiooniks on ScrollReveal mugavam, kuna seda hallatakse puhtalt JS-ist.

Kuidas on Intersection Observer parem vanast lähenemisest jQuery kerimissündmustega?

jQuery lähenemine kinnitab kuulaja scroll sündmusele, sündmus käivitub kümneid kordi sekundis, iga kutse loeb elemendi geomeetriat (käivitab reflow), sait jääb hanguma. Intersection Observer töötab asünkroonselt, tagasikutset kutsutakse üks kord tegeliku nähtavuse muutuse korral. Lehel, kus on 50 animeeritud plokki, on jõudluse erinevus WebKiti arendajate testide kohaselt umbes 40 korda Observer-i kasuks.

Mida teha, kui animatsioon mobiilis kokutab?

Esiteks kontrolli, et animeerid ainult transform ja opacity omadusi. Teiseks lisa will-change: transform, opacity elemendile enne animatsiooni algust ja eemalda see pärast. Kolmandaks, nõrkadel seadmetel vähenda duration 200-300 ms-ni: kiire animatsioon tundub sujuvam kui kokutav aeglane animatsioon. 60 Hz ekraani värskendussagedusega seadmetel ei jõua alla 300 ms animatsioon silma väsitada.

Kas ilmumisanimatsiooni saab teha üldse ilma JavaScriptita?

Osaliselt, CSS-i kerimisel põhinevate animatsioonide kaudu, kuid spetsifikatsioon on endiselt eksperimentaalne: see töötab Chrome 115+-s, kuid mitte Firefoxis ega Safaris. Tootmiskeskkonna jaoks on vaja kas Intersection Observer-it (natiivne, ilma teekideta) või polüfilli. Tootmissaidi jaoks 2026. aastal on minimaalne variant Intersection Observer ilma teekideta: natiivne JS, null sõltuvust, täielik tugi.

Milline lähenemine valida maandumislehe jaoks 2026. aastal

Kui teed tüüpilist maandumislehte 5-10 plokiga ja tähtaeg on „eile", siis AOS. Kolm koodirida, 30 efekti, raske on mööda panna.

Kui see on SPA React/Vue peal ja animatsioon on seotud äriloogikaga, siis ScrollReveal. Programmeeritav juhtimine korvab need 5 lisaminutit seadistamisel.

Kui jõudluse eelarve on range ja disainer joonistas unikaalsed animatsioonid, siis Intersection Observer. Null kilobaiti, täielik kontroll CSS-i üle, maksimaalne kiirus.

Ära kasuta Revealator-it. Pistikprogramm oli hea 2016. aastal, kuid maailm on edasi liikunud.

Proovi AOS-i testlehel, npm install aos --save või CDN 5 minutiga. Tunneta erinevust staatilise maandumislehe ja lehe vahel, kus plokid ärkavad kerimisel ellu. Kirjuta kommentaaridesse, millise lähenemise valisid ja miks.