Animovaná stránka 404

JavaScript jQuery Zdrojákoviště 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ženo 498x (38.54 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Program pro vás napsal GreenMan
Avatar
Web developer, občasný grafik a ešte občasnejší programátor. Keď niečo musím urobiť robím všetko iné len nie to, čo treba.

Jak se ti líbí článek?
Celkem (1 hlasů) :
55555


 


Miniatura
Všechny články v sekci
JavaScript zdrojákoviště - jQuery

 

 

Komentáře

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

ohh ... to je cool :)

  • dalo by se to udělat i komplet css3 ne ? :)
Odpovědět 26.2.2013 21:47
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
albertpatera
Redaktor
Avatar
Odpovídá na Honza Bittner
albertpatera:

jo souhlasim s tebou je to suprová stránka...už mě zaujala, když jsi ji přihlásil do soutěže o nejlepší Erorr stránku...není divu, že vyhrála :D je fakt super

Editováno 26.2.2013 22:14
 
Odpovědět 26.2.2013 22:13
Avatar
GreenMan
Redaktor
Avatar
Odpovídá na Honza Bittner
GreenMan:

Určite dalo, len by bol potom ešte o kus väčší problém to spojazdniť v prehliadačoch, čo CSS3 animácie nevedia. Aj keď som sa s nimi ešte tak veľa nehral, tak možno na to je nejaký jednoduchý spôsob.

Odpovědět 27.2.2013 12:10
Zelená zostane zelenou, aj keď na ňu vyleješ modrú. - Satik64
Avatar
mkub
Redaktor
Avatar
Odpovídá na GreenMan
mkub:

celkom pekna stranka, to sa ti podarilo, jednoducho si macher

 
Odpovědět 19.11.2013 18:58
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.