Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

Program byl vytvořen v roce 2013.

 

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

 

Všechny články v sekci
JavaScript zdrojákoviště - jQuery
Program pro vás napsal GreenMan
Avatar
Uživatelské hodnocení:
1 hlasů
GreenMan
Aktivity