Chrobáky v JavaScripte

Tento Easter eggový JavaScript zariadi, že sa na webe začnú postupne tvoriť chrobáky (ich limit je nastaviteľný, ja používam 35, nad touto hodnotou začína počet chrobákov spomaľovať web). Chrobáky následne lezú po webovej stránke.

Princíp efektu je jednoduchý, akonáhle dôjde k vykreslenie celého webu, spustí sa funkcia, ktorá uloží obsah HTML do premennej. Potom celý web zmaže, vytvorí najprv nový div s relatívnou pozíciou, ktorý sa stane základom pre divy chrobákov. Do tohto divu sa potom opäť vloží uložený pôvodnú web a už je v ňom možné vytvárať chrobákmi s divy, ktoré majú absolútnu pozíciu a môžu sa pohybovať po celom webe.

Pohyb funguje pomocou CSS3 vlastností (v prípade IE je potreba najmenej verzie 10, inak nebude fungovať rotácie). Smer chrobákov sa mení do 8 smerov. Súčasťou chôdza je animácie, ktoré som docielil pomocou PNG obrázku s viacerými snímkami a následné úpravy vlastnosti background-position.

Skript na web po stiahnutí vložíte týmto kódom

<script src="broucci.js"></script>

chrobáky:

Skript vkladajte na koniec tagu body.

Galéria