Končno prihaja v CSS t.i. “scroll-driven” animacija. Slednja sicer ni nova, ker smo jo že lahko uporabljali s pomočjo JavaScripta, vendar bo počasi to vlogo prevzel CSS.
CSS postaja z leta v leto močnejši oz. boljši, kar večkrat poudarim. Ena zadnjih sprememb so animacije, ki bazirajo na premikanju po ekranu, t.i. “scrollanju”. Animacije se sprožijo glede na lokacijo oz. pozicijo na strani, vse pa je narejeno s pomočjo CSSja.
Kaj so glavne prednosti CSS animacije:
- animacija se odziva na scrollanje po strani, kar pomeni da premikanje po strani enako premikanju v animaciji.
- scrool-driven animacije se razlikujejo od scroll-triggered animacij, saj lahko z scrolanjem vplivamo na pavzo, premikanje in previjanje.
- CSS animacije niso nove, imamo jih že precej let, tako da na že znano znanje dodamo le kako pripeti scrolling sprožilce.
- Glavna slabost pa je slaba podpora, trenutno je podprt le v Chrome in Edge brskalniku.
Primer prikaza slike glede na scrollanje
See the Pen
CSS: Scroll Animations – Slika by Ziga (@pomagalnik)
on CodePen.
Primer prikaza besedila glede na scrollanje
See the Pen
CSS: Scroll Animations – Besedilo by Ziga (@pomagalnik)
on CodePen.
