Parimaid kerimislugusid ühendab üks mõte: lehe kerimine juhib loo kulgu. Kui lugeja kerib, muutub pilt koos tekstiga ning loo tempo on tema enda käes. Võte toimib siis, kui iga samm toob midagi uut. See ebaõnnestub, kui kerimisest saab tüütu kohustus.
Kust kerimislood alguse said
Formaat kasvas välja andmeajakirjandusest. Alguspunktina tuuakse tavaliselt välja New York Timesi laviinilugu „Snow Fall”, mis ilmus veebis 2012. aasta detsembris. John Branchi lugu võitis 2013. aasta Pulitzeri preemia kategoorias Feature Writing ning žürii tõstis eraldi esile „multimeediaelementide oskuslikku lõimimist”.
Toimetused lõid selle lähenemise jaoks korduskasutatavad töövahendid. Avatud lähtekoodiga teegid, näiteks Scrollama, tegid põhivõtte rakendamise lihtsaks: tekstiploki nähtavale jõudmine käivitab muutuse. Seejärel võtsid võtte üle tootebrändid. Apple'i tootelehed tegid tuntuks kerimisega juhitava kaadrijada. CSS-Tricks lõi sama efekti uuesti 148 kaadriga, mis joonistatakse kerimise käigus canvas-elemendile.
Neli peamist kerimisloo võtet
Peaaegu iga kerimisega juhitav veebilugu ühendab neid nelja võtet.
| Võte | Mis toimub | Milleks sobib | Mida silmas pidada |
|---|---|---|---|
| Paigale kinnitatud stseen | Pilt püsib paigal, samal ajal kui mööda kerivad tekstikaardid seda muudavad | Toote, protsessi või diagrammi selgitamine | Kui stseen püsib paigal kauem kui umbes 3 ekraani jagu, tundub, et leht on kinni jäänud |
| Sammhaaval avamine | Iga jaotis lisab ühe elemendi: kihi, sildi või arvu | Tehnilised näitajad, koostisosad, tööpõhimõte | Liiga paljude sammude korral muutub lugu slaidiesitluseks |
| Video või pildijada juhtimine kaaderhaaval | Lehe kerimisasend määrab, millist kaadrit näidatakse | Toote pööramine, osadeks jaotuv vaade, kuju muutumine | Failimaht: iga kaader peab olema võimalikult väike |
| Kaamera liikumine | Kerides liigub kaamera läbi 3D-stseeni | Ruumid, hooned, tootestseenid | Vanemate telefonide graafikaprotsessori koormus |
Kaamera liikumine ühendab kerimisloo reaalajas 3D-ga. Seda ressursimahukamat suunda käsitleme WebGL-veebilehtede näidetes.
Kuidas kerimislooga lehte kavandada
Alusta kaadrikavast tabelis, kujundustööriista jõuad hiljem avada. Iga rida vastab ühele loo etapile.
- Jaga lugu viieks kuni üheksaks etapiks. Kirjuta igaühe kohta üks lause. Kui see ei õnnestu, pole lehel veel selget lugu.
- Määra igale etapile visuaalne olek. Mida lugeja näeb, kui see lause on ekraanil? Näiteks „toode on suletud”, siis „kaas avaneb” ja seejärel „sisemine kiht helendab”.
- Määra igale etapile kerimispikkus. Mõõda seda nähtava ala kõrgustes. Ühe etapi jaoks on tavaliselt vaja 0,5 kuni 1,5 ekraani jagu kerimist. Liida veeru väärtused kokku: kui sinu leht nõuab 15 ekraani jagu kerimist, aga sama sisu mahub staatilisel lehel 3 ekraanile, kärbi.
- Vali üks peamine hetk. Enamik häid näiteid keskendub ühele suurele visuaalsele muutusele. Kõik muu on tagasihoidlikum.
- Lisa mobiilivaate veerg. Otsusta iga etapi kohta, mida telefonis näidatakse: sama animatsiooni, lihtsamat versiooni või staatilist pilti koos tekstiga.
- Lisa vähendatud liikumise veerg. Kui külastaja on sisse lülitanud eelistuse prefers-reduced-motion, näita animatsiooni asemel stseenide lõppolekuid.
Täidetud rida näeb välja näiteks selline:
| Etapp | Tekst | Visuaalne olek | Kerimispikkus | Mobiilivaade | Vähendatud liikumine |
|---|---|---|---|---|---|
| 3 | „Kolm kihti, üks korpus.” | Korpus jaguneb kolmeks kihiks | 1,5 ekraani | Sama tegevus, 60 kaadrit | Osadeks jaotatud toote staatiline renderdus |
Sellest tabelist saab kujunduse, animatsiooni ja arenduse lähteülesanne. Toote turuletoomise lehel saad etapid paigutada struktuuri, mida kirjeldame toote turuletoomise veebilehe artiklis.
Vead, mis kerimisloo rikuvad
Kerimise ülevõtmine. Kui leht määrab ise kerimiskiiruse või hüppab kindlatesse punktidesse, rikub see veebi kõige lihtsamat kokkulepet: sina kerid, leht liigub. Webdesigner Depot loetleb probleemikohad: puuteseadmed, klaviatuuriga navigeerimine, vähendatud liikumise seaded ja puuteplaadi kiirendus. Lase brauseril tavapäraselt kerida ja seo animatsioon kerimisasendiga. Sujuv kerimine sobib, kui see pehmendab liikumist ega blokeeri seda.
Mobiilivaate hüpped. Telefonis ilmub aadressiriba nähtavale ja kaob uuesti, muutes nähtava ala kõrgust kerimise ajal. Tavalise 100vh kõrgusega paigale kinnitatud stseenid hakkavad hüppama. Kasuta kinnitatud jaotiste jaoks väikese vaateala ühikuid (svh) või kindlat kõrgust pikslites ning testi päris seadmel.
Mahukad kaadrijadad. 150 täissuuruses kaadrit võivad olla mahukamad kui kogu ülejäänud veebileht. Hoia kaadrid väikesed ja laadi enamik neist alles pärast seda, kui esimene sisu on ekraanile ilmunud.
Otsingule nähtamatu tekst. Kui lugu asub ainult canvas'e sees või jõuab lehele JavaScripti kaudu, võib otsingumootor näha tühja lehte. Utsubo WebGL-i SEO-juhend ütleb otse: iga sisuliselt oluline leheolek peab olema otsingurobotile loetava HTML-ina olemas enne renderduse käivitumist. Hoia tekst DOM-is ja ehita animatsioon selle ümber. Ülejäänut käsitleme animeeritud veebilehtede SEO artiklis.
Aeglane avavaade. Google'i järgi on Largest Contentful Painti hea tulemus 2,5 sekundit või vähem. Kerimisloo avavaade peaks koosnema tavalisest HTML-ist ja pildist; animatsioon lisa alles seejärel.
