Podzimní výzdoba webu

V minisoutěži Machr na Webdesign za týden 38 jsem vytvořil script, který do v podstatě jakékoliv stránky vloží na pozadí animované padající listí. Script je navržen tak, aby jeho implementace byla co nejjednodušší.

Implementace

Implementace by měla být i nejjednodušší, takže by to měl zvládnout i webmaster tupec. Probíhá ve dvou krocích.

1. Do hlavičky head vložte link na definici animace a elementů.

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

2. Na začátek body vložte script, který vytvoří elementy listů

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

Tímto implementace končí.

Can I Use

Aby tento článek byl ještě užitečnější, tak vám zde popíši co se dočtete na úžasném webu caniuse.com . Při psaní podobných scriptů nebo obecně moderních webů se vám tato stránka bude hodit. V současné době jsou definice HTML5, CSS3 a EcmaScriptu 5 rozepsané a nejsou finální, což znamená, že chceme-li zajistit stejný web všem, tak je ani pomalu nesmíme používat, což je trochu hloupost.

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

Na webu caniuse se tedy dočtete, který webový prohlížeč danou "vymoženost" podporuje, či jaký vendor prefix musíme použít.

Podpora animací (použito v ukázce s listím)

Z předchozího obrázku vyplývá, že Internet Explorer podporuje animace od verze 10 a výš. Mozilla je podporuje plně a to i bez prefixu. Na -moz- můžete u animací již zapomenout. Většina ostatních prohlížečů (postavených na webkitu) animace podporuje jen s vendor prefixem -webkit-. Pod tabulkou jsou ještě karty. Zajímává je karta resources, na které jsou různé zdroje od dokumentace až po různé tutoriály a dema. Při psaní různých webových aplikací nebo stylování webových stránek doporučuji sledovat web Can I Use. Tedy alespoň do okamžiku, než se dokumentace stanou finálními.

Doufám, že vám tento článek byl alespoň trochu užitečným a doufám, že už se těšíte na halloween, až padajícím listím bude vyzdoben ITnetwork.

Galerie

Program byl vytvořen v roce 2013.