Publika je sve zahtevnija i sve je teže privući i zadržati njenu pažnju. Konkurencija sadržaja na internetu je velika i više nije dovoljno da ponudite rešenje problema ili zadovoljenje neke potrebe vaših korisnika. Danas su detalji ti koji određuju da li ćete biti uspešniji u komunikaciji na online kanalima.
Jedan od načina da „kupite“ posetioce svog sajta jeste kroz animacije u Javascript ili CSS programskom jeziku. Iako često fizički male, mogu da naprave značajne promene u korisničkom iskustvu na vebsajtu.
Koje su funkcije animacija?
Neke animacije omogućavaju lakše snalaženje i praćenje sadržaja, dok ima i onih koje isključivo ulepšavaju i zabavljaju.
Omogućavaju feedback
Da li ste ukucali dobru lozinku, da li potvrđujete promene koje ste uneli, da li ste uspeli da uploadujete neki dokument – nakon svih tih poteza moguće je da dobijete vizuelno-auditivni znak u vidu animacije. Slično mikrointerakcijama, mogu da vam „kažu“ da je u toku odgovor sistema na vaš zahtev ili da vam pokažu koliko će to trajati.
Predviđaju ishod neke radnje
Ako korisnik preduzme neku akciju, animacija može da mu pokaže kako će se to izvršiti odnosno kakvo ga novo stanje sistema očekuje po izvršenoj komandi. Ako, na primer, korisnik napravi akciju povlačenja nekog elementa, animacija može da mu pokaže gde će on stići.
Sprečavanje dezorijentacije
Animacije mogu sprečiti konfuziju korisnika, posebno pri promeni konteksta. Na primer, ukoliko korisnici, slučajno ili namerno, na telefonu uključe „prikazivanje preko celog ekrana“ ta promena može da zbuni. Naime, neki mogu da pomisle da ih je to odvelo na drugu stranicu, te je moguće da će pritisnuti „back“ opciju. Ipak, ako postoji neka „transition“ animacija, to bi im pomoglo da shvate da nije reč o novoj stranici, nego o drugom načinu prikazivanja postojeće.
Privlače pažnju
Animacije čine vašu stranicu interesantnijom. Sve što se kreće, razbija monotoniju i privlači pažnju. Ovo je posebno značajno ukoliko imate puno teksta na stranici, te vam je interaktivan momenat itekako potreban.
Izazivaju emocije
Kao što smo napomenuli, uloga animacija je i da korisničko iskustvo učine prijatnijim. Na primer, ukoliko neko u kvizu odgovori tačno na pitanje, animacija može da mu aplaudira ili pokaže palac na gore. Celokupan utisak korisnika postaje bolji uz ovakav vid malih komunikacijskih elemenata i upravo vas to može razlikovati u odnosu na konkurenciju.
Javascript VS CSS animacije
Postoji dva osnovna načina za kreiranje animacija na webu – pomoću CSS i Javascripta. Razlike između njih odnose se na funkcionalnost, troškove i vreme u zavisnosti od kompleksnosti izrade i na pojedinačne performanse.
Animiranje korišćenjem CSS-a je poznato kao deklarativni pristup, dok je Javascript imperativ. Ovo znači da u CSS-u morate konkretno navesti šta treba da se desi, dok u Javascriptu možete programski definisati animaciju. To znači da imate veću kontrolu nad animacijom kada koristite Javascript.
Ako posmatramo iz ugla programera, CSS je jednostavan za učenje, dok je Javascript potpuno suprotan. Za Javascript programiranje često je potrebno korišćenje dodatne biblioteke (library) sa kojom kreator nije upoznat, te iziskuje dodatno vreme za učenje i dodatne troškove.
Performanse su još jedan važan faktor, posebno ako je reč o mobilnim platformama. CSS ima prilično dobre performanse, jer prenosi logiku animacije na sam pretraživač. Ovo omogućava pretraživaču da optimizuje DOM interakciju i potrošnju memorije i što je najvažnije, koristi GPU za poboljšanje performansi vebsajta. S druge strane, performanse Javascript-a mogu varirati od relativno brže do mnogo sporije od CSS-a. Performanse Javascript-a zavise od biblioteke koja se koristi i opet stavlja teret na programera da je optimizuje.
I sada kada znate zašto treba da imate animacije i koje su razlike između Javascript i CSS animacija, u nastavku vam donosimo primere najnovijih za 2022. godinu.
Javascript animacije
Anime.js – jednostavan, ali moćan
Anime.js je lagana JavaScript biblioteka animacije sa jednostavnim, ali moćnim API-jem.
Performanse Anime.js su veoma prilagodljive. Ciljevi animacije, kašnjenja i ključni okviri mogu biti posebno određeni. Oni takođe imaju sjajan skup zapanjujućih efekata za animaciju više elemenata uz prateći i preklapajući pokret. Osim toga, možete koristiti vremensku liniju za sinhronizaciju više animacija.
Sa svim ovim karakteristikama i odličnom dokumentacijom, sa sigurnošću se može reći da je Anime.js jedna od najboljih JavaScript biblioteka za korišćenje zbog all-in-one karakteristika.
GSAP – Profesionalna animacija
GSAP biblioteka je odličan način za kreiranje animacija visokih performansi koje rade u svim glavnim pretraživačima.
Uz osnovne karakteristike, GSAP nudi niz dodataka koji će vam pomoći da kreirate impresivno korisničko iskustvo. Njihov dodatak ScrollTrigger, na primer, omogućava da kreirate animacije zasnovane na skrolovanju sa minimalnim kodom.
Za GSAP se kaže da je do 20 puta brži od jQuery-ja i da mu se široko veruje u industriji, sa preko 10 miliona veb lokacija koje ga koriste za animacije visokih performansi.
Popmotion
Sa blizu 18.000 zvezdica, Popmotion je funkcionalna biblioteka animacije za bilo koje JavaScript okruženje. Može da radi sa bilo kojim API-jem.
Popmotion zauzima samo 11,7 kB. Sadrži animacije poput ključnih kadrova, propadanja, vremenske linije za sinhronizaciju više instanci i još mnogo toga. Možete da prebacujete bilo koju seriju animacija ili funkcija, kao i da koristite čiste funkcije za sastavljanje sopstvenih konfiguracija.
Three.js
Three.js je na vrhu liste JavaScript biblioteka animacija sa 60.000+ zvezdica na GitHub-u. Može da kreira i prikazuje 3D animacije u pretraživaču.
Postoji gomila dokumentacije za edukaciju, a kada to naučite, nema mnogo toga što ne možete postići koristeći ovu biblioteku. Prvo, koristeći Three.js editor, kreirate scenu. Nakon toga, možete da dodate geometrijske figure i podesite osvetljenje i kameru. Moguće je podesiti i materijal, teksturu, objekat, boju i zamagljivanje.
GreenSock.js
GreenSock-ov GSAP radi sa skupom malih JavaScript datoteka koje čine da animacije izgledaju veoma dobro u svim glavnim pretraživačima. On glatko povezuje višestruka svojstva animacije i eliminiše greške u pretraživaču.
GSAP akcije uključuju kreiranje animacija na Canvas-u i animaciju bilo kog objekta u sceni, kao i napredno otkrivanje, preoblikovanje ili pomeranje bilo kog objekta duž putanje. U tu svrhu radi sa gomilom softverskih aplikacija kao što su SVGPlugins, PikiPlugin, VebGL, Adobe Animate i EaseJS. Njegova modularna struktura pomaže vam da odaberete samo funkcije koje su vam potrebne. Sa osam miliona korisnika i više od 10.000 zvezda na GitHub-u, ova moćna biblioteka ima mnogo toga da ponudi.
CSS animacije
Container Queries
Container Queries – deo css-contain-3 – dozvoljava autorima da stilizuju elemente prema veličini ili izgledu kontejnera. Za container queries zasnovane na veličini, slično je kao kod Media Query, osim što će ovde proceniti veličinu roditeljskog kontejnera, umesto prozora za prikaz. Kada je reč o container queries zasnovane na stilu, uslovno primenjujete stilove na osnovu izračunate vrednosti drugog CSS svojstva.
Cascade Layers
Koristeći Cascade Layers možete kontrolisati red kaskada po pravilu ređanja slojeva istog porekla. Ovo radite postavljanjem stilova koristeći layer@rule. Slojevi se pojavljuju pre redosleda pojavljivanja u kaskadi. Cascade Layers će biti podržani od strane Chromium 99 i Firefox 97, kao i u Safari TP 133.
Color Functions
CSS-color-5 specification dolazi sa nekoliko finih komponenti kada je u pitanju rad sa bojom. Ova animacija donosi dve nove funkcije: color mix, color contrast i proširuje postojeće sa relativnom sintaksom boja. Color mix vam dozvoljava da pomešate dve boje u datom prostoru. Color contarst vam omogućava da izaberete najbolju boju sa liste boja koja ispunjava ili prevazilazi kriterijum kontrasta u poređenju sa osnovnom bojom. Sa color syntax funkcijom možete manipulisati i konvertovati bilo koju boju u bilo koji format.
Overscroll Behaviour
Sa svojstvom CSS overscroll-behavior možete zameniti podrazumevano ponašanje kada se „prebacuje“ kontejner. Pomoću njega možete sprečiti potpuno ponovno učitavanje kada se izvrši pokret povlačenja za osvežavanje i zadržati pomeranje unutar jednog sloja itd. Podržan je od strane Firevox (verzija 66) i Chromiuma (63).
Accent Color
Accent Color omogućava da se nijansiraju i tamni i svetli elementi. Ova funkcija je tu da nijansira elemente jednom linijom CSS-a, štedeći vas napora za prilagođavanje pružanjem načina da svoj brend unesete u elemente.
