Animovaná stránka 404
Chybová stránka 404, ktorá vyhrala súťaž o "Machra na webdesign". Základ stránky je urobený v HTML a CSS. Z CSS3 je použitý box a text-shadow, zaoblenie rohov a prechod na pozadí. Vďaka správnemu zabaleniu rohov, bolo možné vytvoriť ústa ohnuté do úsmevu. Tak sa môže stránka zobraziť aj užívateľovi, ktorý by mal vypnutý Java Script. Na animáciu a zmenu textu bublín využíva jQuery. Hlavný text, ktorý sa zobrazí nakoniec je zapísaný priamo v HTML, ostatné zobrazené predtým v error.js.
Keďže stránka používa aj CSS3, tak v niektorých starších prehliadačoch (hlavne IE), môže dojsť k problémom so zobrazením. V tomto príklade som to nechal tak, pretože sa mi zdalo, že to nakoniec vypadá celkom zaujímavo, ale to nie je veľmi ťažké zmeniť. Využiť sa dá napr. knižnica Modernizr (Dá sa s ňou naučiť celkom ľahko, ale ak by bol záujem môžem spísať menší návod.), ktorá vie zistiť podporu jednotlivých vlastností a podla ich dostupnosti pridať nové súbory CSS alebo JS. Potom by sa dali jednotlivé zaoblené časti nahradiť obrázkami a postupné menenie úst jednoduchou animáciou, na základe postupného striedania obrázkov.
Priložený zip obsahuje zdrojový kód stránky, okomentovanú aj minimalizovanú verziu Java Scirptu, css súbory pre vzhľad stránky a jQuery 1.9.1.
Galerie
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 539x (38.54 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript