Kun saavut sivustolle ja selaat sivua, kulmassa oleva logo pyörii sulavasti reagoiden jokaiseen hiiren rullan liikkeeseen. Se näyttää eloisalta ja tekniseltä, ja tuo sitä erityistä silausta, jonka ihmiset huomaavat.

Tämän pyörityksen luominen on helpompaa kuin miltä näyttää. Et tarvitse raskaita kirjastoja tai megatavujen animaatiokehyksiä. Tarvitset vain yhden divin, muutaman rivin CSS:ää ja kirjaimellisesti yhden JavaScript-lohkon.

Alla on vaiheittainen erittely: kuvan valmistelusta mobiilinäyttöihin mukauttamiseen. Koodi on testattu, toimiva ja riippumaton muista kirjastoista.

💡 Nopea yleiskatsaus:

• Valmistele SVG- tai PNG-objekti ja lisää se HTML:ään
• Kiinnitä sijainti position: fixed -määrityksellä ja aseta etäisyydet viewport-yksiköillä
• Lisää JavaScriptin scroll-käsittelijä, joka pyörittää objektia transform: rotate() -funktiolla
• Säädä pyörimisnopeutta jakamalla window.scrollY kertoimella
• Lisää mobiililaitteille media query, jossa on uusi sijainti ja siirtymäaika

1. Objektin valmistelu

Objekti voi olla mitä tahansa: kuvake, logo, vektorimuoto, nuolisymboli. Suosittelen SVG:tä, se ei menetä terävyyttä muunnoksissa ja painaa lähes mitättömän vähän. Jos läpinäkyvyys on kriittistä eikä sinulla ole vektoria, PNG toimii.

Sijoita kuva säilö-div-elementin sisään ja laita se body-osioon, mieluiten lähelle alkua. Erillinen div helpottaa hallintaa: myöhemmin voit lisätä viereisiä elementtejä tai vaihtaa kuvan koskematta sijainnin logiikkaan.

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

Voit käyttää useita objekteja, anna vain jokaiselle yksilöllinen id ja kopioi JS-logiikka sitomalla se omaan elementtiinsä. Mutta rakennetaan nyt yksi toimiva esimerkki.

2. Sijoittelu CSS:llä

Mihin objekti kannattaa sijoittaa? Riippuu tavoitteesta:

• Oikea alakulma, pienoikuvake, joka ei häiritse sisältöä. Klassinen valinta blogeille ja portfolioille.
• Vasen yläkulma, vierityksen sijainnin ilmaisin (edistymispyörä).
• Alareunan keskikohta, suuri koriste-elementti, joka kiinnittää huomion alatunnisteeseen.

Tarkastellaan oikean alakulman skenaariota, se on yleispätevä eikä peitä navigaatiota. Kirjoita CSS:ään:

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
}

Avain on position: fixed. Tämä kiinnittää elementin selainikkunan, ei dokumentin, suhteen. Vieritettäessä sisältö liikkuu, mutta objekti pysyy paikallaan. Yksiköt vw ja vh (prosenttiosuudet viewportin leveydestä ja korkeudesta) säätävät etäisyydet automaattisesti mille tahansa näytölle älypuhelimesta 4K-näyttöön.

Ominaisuus transition: 0.1s ease-out pehmentää nykäyksiä sijaintia vaihdettaessa. Pyöritykselle sen rooli on toissijainen, mutta koon muutoksessa tai media query -vaihdoksissa siirtymä näyttää siistimmältä.

3. Pyöritysanimaatio JavaScriptillä

CSS voi tehdä yksinkertaisia @keyframes-animaatioita, mutta tehtävämme on sitoa pyörityskulma vierityksen sijaintiin. Tässä kohtaa JavaScript astuu kuvaan. Minimaalinen toimiva koodi:

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

Mitä tässä tapahtuu: window.scrollY palauttaa pikselimäärän, jonka sivua on vieritetty pystysuunnassa. Tämä luku syötetään CSS:n rotate()-funktioon, yksi vierityspikseli vastaa yhtä astetta kiertoa.

Jos objekti pyörii liian nopeasti, jaa arvo kertoimella:

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

Valitse jakaja, joka sopii sivusi pituuteen. Arvo /2 hidastaa pyörimisen puoleen, /4 tekee siitä sulavan ja tuskin havaittavan. Pitkille laskeutumissivuille käytä /6 tai /8, jotta objekti ei tee kymmentä täyttä kierrosta sivun puoliväliin mennessä.

Suorituskykyhuomio

scroll-tapahtuma laukeaa kymmeniä kertoja sekunnissa. Yksinkertaisella sivustolla, jossa on yksi transform, tämä on huomaamatonta, mutta jos sinulla on useita animoituja objekteja tai raskas DOM, kääri logiikka requestAnimationFrame-funktioon:

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 ryhmittää kutsut selaimen synkronointikehyksiin (yleensä 60 fps) eikä suorita tyylien uudelleenlaskentaa jokaisella scroll-tapahtumalla, mikä säästää suoritintehoa ja akkua mobiililaitteilla.

Lisää myös will-change: transform #scrollObject-CSS-sääntöön. Tämä kertoo selaimelle, että se voi varata GPU-koostekerroksen etukäteen, ja pyöritys saa laitteistokiihdytyksen:

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

4. Mobiilisovitus

Alle 600 pikselin näytöillä oikea alakulma voi olla ristiriidassa hampurilaisvalikoiden tai "takaisin ylös" -painikkeiden kanssa. Järkevä ratkaisu on siirtää objekti alareunan keskelle, jotta se ei peitä interaktiivisia elementtejä:

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
}

Objekti siirtyy näytön yläosaan, keskitettynä käyttäen left: 50% ja negatiivista margin-left-arvoa, mikä on klassinen vaakakeskitystekniikka. Leveyttä on hieman kasvatettu (8vh 7vh:n sijaan) kompensoimaan lyhyempää katseluetäisyyttä.

Huomaa transition: 0.2s ease-out media queriessa. Kun siirrytään työpöytänäkymästä mobiiliin (tai ikkunan kokoa muutettaessa), objekti ei "hyppää" hetkessä, vaan liukuu sulavasti uuteen sijaintiin 0,2 sekunnin aikana.

Jos työskentelet Vuella tai Reactilla, erota vieritysobjekti omaksi komponentikseen. Voit liittää sen juuren App.vue-tiedostoon tai layout-rakenteeseen, jolloin animaatio on läsnä kaikilla sivuilla kerralla ilman koodin toistoa.

Moderni vaihtoehto: CSS:n vieritysohjatut animaatiot

Vuosina 2024-2025 Chromium-pohjaiset selaimet (Chrome, Edge, Opera) saivat natiivin tuen animation-timeline: scroll() -määritykselle, vieritykseen sidotuille animaatioille ilman yhtäkään JavaScript-riviä. Se näyttää tältä:

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

Plussaa: ei JavaScriptiä lainkaan, miinusta: toistaiseksi vain Chromiumissa (Firefox ja Safari ovat toteuttamassa). Progressiivista parantamista varten voit yhdistää: anna CSS-versio moderneille selaimille ja pidä JS-käsittelijä vararatkaisuna muille. Lisätietoja MDN:ssä.

⁉️🤔 Usein kysytyt kysymykset

Voinko animoida muutakin kuin pyöritystä, esimerkiksi skaalausta tai läpinäkyvyyttä?

Kyllä. transform tukee useita funktioita samanaikaisesti. Saadaksesi objektin pyörimään ja pienenemään vieritettäessä: scrollObject.style.transform = \rotate(${window.scrollY}deg) scale(${1 - window.scrollY / 5000});. Läpinäkyvyyttä käsitellään transform-määrityksestä erillään opacity-ominaisuudella. Voit yhdistellä jopa viittä tai kuutta parametria, mutta testaa, sillä useat muunnokset heikoilla laitteilla voivat aiheuttaa mikronykimistä. Yksi tai kaksi parametria plus will-change: transform on turvallinen katto 60 fps:n ruudunpäivitykselle.

Kumpi on parempi animaatioon: SVG vai PNG?

SVG, ehdottomasti. Se skaalautuu menettämättä terävyyttä missään kierrossa ja näytön resoluutiossa, painaa vähemmän, ja selain renderöi sen vektorina (ei pikseliportaita reunoissa rotate-käsittelyn jälkeen). Ota PNG vain, jos sinulla on jo valmiita bittikarttagrafiikoita eikä aikaa tehdä niitä uusiksi. Vältä JPEG:tä pyöriville objekteille, pakkausartefaktit tulevat näkyvämmiksi kierron jälkeen.

Miten saan animaation alkamaan vasta, kun objekti on näkyvällä alueella?

Käytä IntersectionObserver-rajapintaa. Sen sijaan, että sitoisit animaation globaaliin scroll-tapahtumaan, seuraat, onko objekti tullut viewporttiin, ja otat pyörityksen käyttöön vasta sitten. Tämä säästää resursseja, kun elementti on näytön ulkopuolella. Perusrunko: luo observer threshold: 0 -arvolla, lisää/poista .active-luokka callbackissa ja sido JS:n scroll-käsittelijä tämän luokan olemassaoloon.

Miksi animaatio nykii sivustollani?

Kolme tyypillistä syytä. Ensimmäinen: ei will-change: transform -määritystä, selain ei anna elementtiä GPU-koostettavaksi ja laskee asettelun uudelleen joka ruudulla. Toinen: uudelleenpiirtoa aiheuttavia ominaisuuksia (kuten width, height, margin tai padding) sovelletaan elementtiin saman scroll-käsittelijän sisällä. Korvaa ne transform: scale() ja transform: translate() -funktioilla. Kolmas: scroll-takaisinkutsu suoritetaan ilman requestAnimationFrame-funktiota ja tuottaa ylimääräisiä uudelleenpiirtoja kehysten välissä. Kääri logiikka rAF-malliin (esimerkki "Suorituskykyhuomio"-osiossa).

Tarvitaanko JavaScriptiä? On olemassa puhtaita CSS-ratkaisuja.

CSS:n @keyframes on sidottu aikaan, ei vierityksen sijaintiin. Kyllä, animation-timeline: scroll() muuttaa peliä, mutta selaintuki on edelleen puutteellinen (katso osio 4). Vuoden 2026 puolivälissä JavaScript-ratkaisu scrollY + transform on edelleen luotettavin selainten välinen tapa sitoa pyöritys vieritykseen. Koko koodi mahtuu viiteen riviin, ei vedä mukanaan riippuvuuksia ja toimii Internet Explorer 10:stä tuoreimpaan Chromeen.

Kannattaako vieritysanimaatio lisätä sivustollesi?

Objektin pyörittäminen vierityksen mukana ei ole vain "siisti temppu". Se on mikrointeraktio, joka antaa kävijälle tuntoon perustuvaa palautetta: "liikutan sivua ja jotain tapahtuu". Oikein määritettynä se ei ärsytä tai häiritse, vaan tuo sivustolle persoonallisuutta.

Jos sivusto on minimalistinen, rajoita itsesi yhteen pieneen objektiin kulmassa ja kertoimeen /4 tai /6. Laskeutumissivuilla ja portfolioissa voit leikitellä rohkeammin: suuri keskeinen elementti kertoimella /2, yhdistetty pyöritys- ja skaalausanimaatio, kuvan vaihto tietyn scrollY-arvon saavutettaessa.

Pääsääntö: vieritysanimaation tulee täydentää sisältöä, ei kilpailla sen kanssa huomiosta. Yksi objekti, sulava liike, ei tungettelevuutta, ja sivustosi jää mieleen.