Jesenné výzdoba webu

V minisoutěži Machr na Webdesign za týždeň 38 som vytvoril script, ktorý do v podstate akékoľvek stránky vloží na pozadí animované padajúce lístie. Script je navrhnutý tak, aby jeho implementácia bola čo najjednoduchšia.

Implementácia

Implementácia by mala byť aj najjednoduchšie, takže by to mal zvládnuť aj webmaster tupec. Prebieha v dvoch krokoch.

1. Do hlavičky head vložte link na definíciu animácie a elementov.

<link rel="stylesheet" href="http://machr38.misaz.moxo.cz/podzim.css" />

1. Na začiatok body vložte script, ktorý vytvorí elementy listov

<script src="http://machr38.misaz.moxo.cz/podzim.js"></script>

Týmto implementácie končí.

Can I Use

Aby tento článok bol ešte užitočnejšie, tak vám tu popíšem čo sa dočítate na úžasnom webe caniuse.com. Pri písaní podobných scriptov alebo všeobecne moderných webov sa vám táto stránka bude hodiť. V súčasnej dobe sú definície HTML5, CSS3 a ECMAScript 5 rozpísané a nie sú finálne, čo znamená, že ak chceme zabezpečiť rovnaký web všetkým, tak ich ani pomaly nesmieme používať, čo je trochu hlúposť.

Poznámka: ECMAScript je JavaScript. JavaScript je registrovaná obchodná značka.

Na webe caniuse sa teda dočítate, ktorý webový prehliadač danú "vymoženosť" podporuje, či aký vendor prefix musíme použiť.

Podpora animácií (použité v ukážke s lístím)

Z predchádzajúceho obrázku vyplýva, že Internet Explorer podporuje animácie od verzie 10 a vyššie. Mozilla je podporuje plne a to aj bez prefixu. Na -moz- môžete u animáciou už zabudnúť. Väčšina ostatných prehliadačov (postavených na WebKite) animácie podporuje len s vendor prefixom -webkit-. Pod tabuľkou sú ešte karty. Zaujímavou je karta resources, na ktoré sú rôzne zdroje od dokumentácie až po rôzne tutoriály a dema. Pri písaní rôznych webových aplikácií alebo štýlovanie webových stránok odporúčam sledovať web Can I Use. Teda aspoň do okamihu, než sa dokumentácia stanú finálnymi.

Dúfam, že vám tento článok bol aspoň trochu užitočným a dúfam, že už sa tešíte na halloween, až padajúcim lístím bude vyzdobený ITnetwork.

Galéria