A modern webdesign egyik alapkövetelménye a látványos, figyelemfelkeltő design, aminek az egyik egyre inkább elkerülhetetlen eleme a mozgókép, de legalábbis az, hogy a honlapod ne simán statikus képet mutasson, mint egy színes magazinból kivágott oldal, hanem valamilyen szinten képes legyen megmozdulni. Manapság alapvetésnek számít, hogy kifejezetten jót tesz a tartalomnak, ha videót is integrálunk az oldalba, de nem csak a gondosan megrendezett kisfilmek vagy Blenderben megkonstruált, a Digic Picturest is megszégyenítő animációs filmek fontosak, hanem kisebb effektusok, interaktív, vagy csak önmaguktól megmozduló elemek, például feliratok.

Egy felirat megmozdításához sokféle eszközt bevethetünk, az egyik legegyszerűbb persze egy kész gif animáció vagy akár egy kész mp4 beágyazása a honlapba. Ezek a megoldások ugyan látványosak, de több hátulütőjük is van:

• Minőség: egy videóba vagy animgifbe beégetett felirat muszáj, hogy valamennyire össze legyen húzva, valamilyen kompromisszumot mindenképpen kell kötni a fájlméret szinten tartásához. Értelemszerűen minél kisebb a fájl, annál kevésbé néz ki jól, különösen nagyobb böngészőablakokban.
• Méret: ahogy az előbb is írtam, minél pofásabb egy animáció, annál nagyobb a fájlméret, a betöltendő tartalom mérete és ezzel együtt a betöltési sebesség pedig mostanában a webdesign egyik legnagyobb mumusa.
• Maga a felirat: a képbe vagy videóba csomagolt feliratot nem tudják kiolvasni a keresőrobotok. Meta-leírásokkal, alt-textek beírásával ezt orvosolhatjuk valamelyest, de az a legjobb, ha tiszta szöveget tudunk az oldalra helyezni.

A megoldás persze a CSS (és alkalomadtán némi JavaScript). Néhány sor kóddal meglepően látványos hatásokat érhetünk el a teljesen SEO-barát, sima html-feliratainból. Inspiráló megoldásokat keresve a CodePenhez fordultam. Ha nem ismernétek, ez az oldal kódolók Dribbble-je, ahol nem csak a látványos végeredményt csodálhatjuk tátott szájjal, hanem rögtön a kód motorház alatti működését is meg lehet vizsgálni (sőt, rögtön bele is lehet piszkálni). Mindennek tetejébe a feltett alkotások általában (ha nincs külön jelezve) nyílt forráskódnak számítanak, azaz akár fel is használhatóak.

Lássunk néhány szuper trükköt! 

A kódokat a Run Pen kapcsoló megnyomásával indíthatod el. Ugyan a kódot magát ezekben a pici beágyazott ablakokban is megnézheted, de ha valamit alaposabban megvizsgálnál, érdemes az ablak jobb felső sarkában az “Edit on CodePen” feliratra (vagy a CodePen ikonra) bökve teljes képernyőben kezdeni kísérletezni a beállításokkal.