Sa maandud saidile, kerid lehte ja nurgas olev logo pöörleb sujuvalt, reageerides igale kerimisratta liigutusele. See näeb välja elav, tehniliselt nutikas ja lisab selle erilise nüansi, mida inimesed märkavad.

Selle pöörlemise loomine on lihtsam, kui tundub. Sa ei vaja raskeid teeke ega megabaidiseid animatsiooniraamistikke. Vaja läheb vaid ühte div-i, paari rida CSS-i ja sõna otseses mõttes ühte JavaScripti plokki.

Allpool on samm-sammuline jaotus: alates pildi ettevalmistamisest kuni mobiiliekraanidele kohandamiseni. Kood on testitud, töötab ja sellel puuduvad sõltuvused.

💡 Kiire ülevaade:

• Valmista ette SVG või PNG objekt ja lisa see HTML-i
• Fikseeri asukoht kasutades position: fixed ja määra nihked viewport-ühikutega
• Lisa JavaScripti scroll töötleja, mis pöörab objekti kasutades transform: rotate()
• Reguleeri pöörlemiskiirust jagades window.scrollY koefitsiendiga
• Mobiili jaoks lisa media query uue positsioneerimise ja üleminekuajaga

1. Objekti ettevalmistamine

Objekt võib olla ükskõik mis: ikoon, logo, vektorkuju, noolesümbol. Soovitan SVG-d, see ei kaota teisenduste käigus teravust ja ei kaalu peaaegu midagi. Kui läbipaistvus on kriitiline ja vektorit pole, siis PNG sobib.

Aseta pilt konteinerisse div ja paiguta see body sisse, eelistatavalt ülaosa lähedale. Eraldi div lihtsustab haldamist: hiljem saad lisada naaberelemente või pilti vahetada ilma positsioneerimisloogikat puudutamata.

1
<div id="scrollContainer">
2
  <img src="img/scrollObject.svg" alt="scrollObject" id="scrollObject">
3
</div>

Sul võib olla mitu objekti, anna igale lihtsalt unikaalne id ja dubleeri JS-i loogika, sidudes selle oma elemendiga. Kuid praegu ehitame ühe töötava näite.

2. Positsioneerimine CSS-iga

Kuhu objekt paigutada? Sõltub eesmärgist:

• Alumine parem nurk, miniatuurne ikoon, mis ei sega sisu. Klassikaline blogide ja portfooliote jaoks.
• Ülemine vasak nurk, kerimispositsiooni indikaator (edenemisratas).
• Alumise serva keskkoht, suur dekoratiivne element, mis tõmbab tähelepanu jalusesse.

Vaatame alumise parema nurga stsenaariumi, see on universaalne ega kata navigatsiooni. CSS-is kirjuta:

1
#scrollObject {
2
  position: fixed;
3
  right: 3vw;
4
  bottom: 3vh;
5
  top: auto;
6
  width: 7vh;
7
  height: auto;
8
  transition: 0.1s ease-out;
9
}

Võti on position: fixed. See fikseerib elemendi brauseriakna, mitte dokumendi suhtes. Kerides sisu liigub, kuid objekt jääb paigale. Ühikud vw ja vh (protsendid viewport'i laiusest ja kõrgusest) kohandavad nihked automaatselt iga ekraani jaoks, nutitelefonist kuni 4K monitorini.

Omadus transition: 0.1s ease-out silub tõmblused asukoha muutmisel. Pöörlemise jaoks on selle roll teisejärguline, kuid suuruse muutmise või media query muudatuste ajal näeb üleminek puhtam välja.

3. Pöörlemisanimatsioon JavaScriptiga

CSS suudab teha lihtsaid @keyframes, kuid meie ülesanne on siduda pöördenurk kerimispositsiooniga. Siin tuleb mängu JavaScript. Minimaalne töötav kood:

1
const scrollObject = document.getElementById("scrollObject");
2
 
3
window.addEventListener("scroll", () => {
4
  scrollObject.style.transform = `rotate(${window.scrollY}deg)`;
5
});

Mis siin toimub: window.scrollY tagastab vertikaalselt keritud pikslite arvu. See arv sisestatakse CSS-i rotate() funktsiooni, üks kerimise piksel võrdub ühe pöördekraadiga.

Kui objekt pöörleb liiga kiiresti, jaga väärtus koefitsiendiga:

1
const speedFactor = window.scrollY / 2;
2
const scrollObject = document.getElementById("scrollObject");
3
 
4
window.addEventListener("scroll", () => {
5
  scrollObject.style.transform = `rotate(${speedFactor}deg)`;
6
});

Vali jagaja, mis sobib sinu lehe pikkusega. Väärtus /2 aeglustab pöörlemist poole võrra, /4 muudab selle sujuvaks ja vaevumärgatavaks. Pikkade maandumislehtede jaoks kasuta /6 või /8, et objekt ei teeks lehe keskpaigaks kümmet täispööret.

Jõudluse märkus

Sündmus scroll käivitub kümneid kordi sekundis. Lihtsal saidil ühe transform-iga on see märkamatu, kuid kui sul on mitu animeeritud objekti või raske DOM, mähi loogika requestAnimationFrame sisse:

1
const scrollObject = document.getElementById("scrollObject");
2
let ticking = false;
3
 
4
window.addEventListener("scroll", () => {
5
  if (!ticking) {
6
    requestAnimationFrame(() => {
7
      scrollObject.style.transform = `rotate(${window.scrollY}deg)`;
8
      ticking = false;
9
    });
10
    ticking = true;
11
  }
12
});

requestAnimationFrame koondab kutsed brauseri sünkroniseerimiskaadritesse (tavaliselt 60 kaadrit sekundis) ega käivita stiilide ümberarvutust igal kerimissündmusel, säästes protsessorit ja akut mobiilis.

Lisa ka will-change: transform CSS-i reeglile #scrollObject. See ütleb brauserile, et eraldaks eelnevalt GPU komposiitkihi ja pöörlemine on riistvaraliselt kiirendatud:

1
#scrollObject {
2
  /* ... other properties ... */
3
  will-change: transform;
4
}

4. Mobiiliga kohandamine

Ekraanidel, mis on väiksemad kui 600 pikslit, võib alumine parem nurk konfliktis olla burgerimenüüde või "tagasi üles" nuppudega. Mõistlik lahendus on liigutada objekt alumisse keskele, et see ei kataks interaktiivseid elemente:

1
@media only screen and (max-width: 600px) {
2
  #scrollObject {
3
    transition: 0.2s ease-out;
4
    margin-left: -4vh;
5
    width: 8vh;
6
    height: auto;
7
    top: 10px;
8
    left: 50%;
9
  }
10
}

Objekt liigub ekraani ülaossa, tsentreerituna kasutades left: 50% koos negatiivse margin-left-iga, klassikaline horisontaalse tsentreerimise tehnika. Laiust on veidi suurendatud (8vh asemel 7vh), et kompenseerida lühemat vaatamiskaugust.

Pane tähele transition: 0.2s ease-out media query's. Lauaarvutilt mobiilile üleminekul (või akna suuruse muutmisel) ei "hüppa" objekt koheselt, vaid nihkub sujuvalt uude asukohta 0,2 sekundi jooksul.

Kui töötad Vue või Reactiga, eralda kerimisobjekt eraldi komponendiks. Saad selle kinnitada juurkomponendi App.vue või layout külge, nii on animatsioon kõigil lehtedel korraga olemas, ilma koodi dubleerimata.

Kaasaegne alternatiiv: CSS-i kerimispõhised animatsioonid

Aastatel 2024-2025 said Chromiumi brauserid (Chrome, Edge, Opera) loomuliku toe animation-timeline: scroll()-le, kerimisega seotud animatsioonidele ilma ühegi JavaScripti reata. See näeb välja nii:

1
@keyframes rotate {
2
  to { transform: rotate(360deg); }
3
}
4
 
5
#scrollObject {
6
  animation: rotate linear;
7
  animation-timeline: scroll();
8
}

Pluss: null JavaScripti, miinus: praegu ainult Chromiumis (Firefox ja Safari on juurutamas). Järkjärguliseks täiustamiseks saad kombineerida: anna CSS-i versioon kaasaegsetele brauseritele ja hoia JS-i töötlejat varuvariandina ülejäänutele. Üksikasjad MDN-is.

⁉️🤔 Korduma kippuvad küsimused

Kas ma saan animeerida mitte ainult pöörlemist, vaid ka skaalat või läbipaistvust?

Jah. transform toetab korraga mitut funktsiooni. Et objekt kerimisel pöörleks ja kahaneks: scrollObject.style.transform = \rotate(${window.scrollY}deg) scale(${1 - window.scrollY / 5000})`;. Läbipaistvust käsitletakse transform-ist eraldi, kasutades opacity. Kombineeri kuni viit või kuut parameetrit, kuid testi, sest mitu teisendust nõrkadel seadmetel võivad põhjustada mikrotõrkeid. Üks või kaks parameetrit pluss will-change: transform` on ohutu lagi 60 kaadrit sekundis jaoks.

**Kumb on animatsiooniks parem: SVG või PNG?**

SVG, kahtlemata. See skaleerub ilma teravust kaotamata igasuguse pöörde ja ekraani eraldusvõime juures, kaalub vähem ja brauser renderdab seda vektorina (pärast rotate ei teki servadele pikslitreppe). Võta PNG ainult siis, kui sul on juba valmis rastergraafika ja pole aega seda ümber teha. Väldi JPEG-d pöörlevate objektide puhul, tihendusartefaktid muutuvad pärast pööramist märgatavamaks.

**Kuidas panna animatsioon käivituma alles siis, kui objekt on nähtaval alal?**

Kasuta IntersectionObserver-it. Globaalse scroll-i külge sidumise asemel jälgid, kas objekt sisenes vaatevälja ja alles siis lubad pöörlemise. See säästab ressursse, kui element on ekraanilt väljas. Põhimall: loo vaatleja threshold: 0-ga, tagasikutses lisa/eemalda .active klass ja seo JS-i kerimistöötleja selle klassi olemasoluga.

**Miks animatsioon minu saidil tõrgub?**

Kolm tüüpilist põhjust. Esiteks: puudub will-change: transform, brauser ei anna elementi GPU komposiitkihile ega arvuta paigutust igal kaadril ümber. Teiseks: omadused, mis põhjustavad ümberpaigutust (nagu width, height, margin või padding), rakendatakse elemendile samas kerimistöötlejas. Asenda need transform: scale() ja transform: translate()-ga. Kolmandaks: kerimise tagasikutse käivitub ilma requestAnimationFrame-ita ja tekitab lisavärskendusi kaadrite vahel. Mähi loogika rAF mustrisse (näide jaotises "Jõudluse märkus").

**Kas JavaScript on kohustuslik? On olemas puhtad CSS-lahendused.**

CSS-i @keyframes on seotud aja, mitte kerimispositsiooniga. Jah, animation-timeline: scroll() muudab mängu, kuid brauseritugi on endiselt puudulik (vt jaotist 4). 2026. aasta keskpaiga seisuga on JavaScripti lahendus scrollY + transform endiselt kõige usaldusväärsem brauseriülene viis pöörlemise kerimisega sidumiseks. Kogu kood mahub 5 reale, ei tõmba sõltuvusi ja töötab alates Internet Explorer 10-st kuni värske Chrome'ini.

Kas peaksid oma saidile kerimisanimatsiooni lisama?

Objekti pöörlemine kerimisel ei ole lihtsalt "lahe trikk". See on mikrointeraktsioon, mis annab külastajale kombatava tagasiside: "Ma liigutan lehte ja midagi toimub". Õigesti seadistatuna ei ärrita ega sega see tähelepanu, vaid lisab saidile isikupära.

Kui sait on minimalistlik, piirdu ühe väikese objektiga nurgas ja koefitsiendiga /4 või /6. Maandumislehtede ja portfooliote puhul võid julgemalt mängida: suur keskne element /2-ga, kombineeritud pöörlemis- ja skaalaanimatsioon, pildi vahetus teatud scrollY väärtuse saavutamisel.

Peamine reegel: kerimisanimatsioon peaks täiendama sisu, mitte võistlema sellega tähelepanu pärast. Üks objekt, sujuv liikumine, pealetükkimatus ja sinu sait jääb meelde.