Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Animovaná stránka 404

JavaScript jQuery Zdrojákoviště Animovaná stránka 404

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 507x (38.54 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Program pro vás napsal GreenMan
Avatar
Jak se ti líbí článek?
1 hlasů
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.
Miniatura
Všechny články v sekci
JavaScript zdrojákoviště - jQuery
Aktivity (1)

 

 

Komentáře

Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:26.2.2013 21:47

ohh ... to je cool :)

  • dalo by se to udělat i komplet css3 ne ? :)
Odpovědět 26.2.2013 21:47
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
albertpatera
Redaktor
Avatar
Odpovídá na Honza Bittner
albertpatera:26.2.2013 22:13

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:27.2.2013 12:10

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:19.11.2013 18:58

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.