CSS, SVG, videó vagy WebGL?

Egy weboldalon a mozgás elkészülhet egy sor kódból vagy egy több megabájtos fájlból. A látogató a különbséget nem a technikában látja, hanem abban, hogy milyen gyorsan tölt be az oldal, mennyire éles a kép, és akad-e a telefonon. Érdemes ezért ismerni az eszközöket – legalább nagy vonalakban.

CSS-animáció

A böngésző saját stílusnyelvével leírt mozgás: elmozdulás, forgás, átlátszóság, színváltás.

• Mire jó? Gombok, kártyák, beúszások, lebegés, fényhatások, átmenetek.
• Előnye: szinte nulla letöltés, a böngésző optimalizálja, mozgáscsökkentésnél egy sorral leállítható.
• Korlátja: összetett, sok szereplős jelenetekhez nehézkes.

A legtöbb modern weboldal mozgásának nagy része ma CSS-ből is megoldható.

SVG-animáció

Az SVG vektoros rajz, amely kódként kerül az oldalba. Részei külön mozgathatók.

• Mire jó? Mozgó logók, ikonok, ábrák, rajzolódó vonalak, illusztrációk.
• Előnye: minden kijelzőn éles, kicsi a fájlmérete, a szövegei olvashatók a keresők és a felolvasóprogramok számára.
• Korlátja: fotószerű, bonyolult textúrákhoz nem való.

Az oldalunk mozgó logója is SVG: a szilánkok külön csoportokként lebegnek és csillannak.

Videó

Felvett vagy renderelt mozgókép.

• Mire jó? Valódi felvételek, termékbemutató, hangulatfilm, összetett 3D jelenet előre elkészítve.
• Előnye: bármilyen látvány visszaadható, amit le lehet filmezni vagy renderelni.
• Korlátja: nagy fájlméret, nem éles minden méretben, a benne lévő szöveg nem olvasható gépileg. Nyitóképen, mobilon különösen óvatosan.

Ha videó kerül az oldalra, legyen tömörítve, ne induljon hanggal, és legyen megállítható.

WebGL

A grafikus kártyát használó, valós idejű 3D és effektus.

• Mire jó? Interaktív 3D termék, részecskék, folyadékszerű vagy fényhatások, amelyek a mutatóra reagálnak.
• Előnye: olyan látvány, amely másképp nem érhető el – valóban „wow”.
• Korlátja: nagyobb kód, több számítás; gyengébb telefonon akadozhat, és gondoskodni kell egy egyszerűbb változatról is.

WebGL-t akkor érdemes választani, ha a látvány maga az üzenet, és akkor is úgy, hogy az oldal tartalma nélküle is teljes legyen.

Hogyan döntünk?

Mindig a legkönnyebb eszközzel kezdünk, amely a kívánt hatást hozza. Ami megoldható CSS-sel, az CSS lesz. Ami rajz, az SVG. Videó és WebGL akkor jön, ha a látvány tényleg igényli – és akkor is lusta betöltéssel, hogy az első képernyő ne várjon rá.

Erről a látványos és gyors weboldalról szóló írásunkban is szóltunk. Ha van egy ötlete, és nem tudja, melyik eszköz illik hozzá, az animáció és interakció oldalon leírjuk, hogyan dolgozunk – vagy kérdezzen minket.