C# týden ITnetwork summer 2020
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se C#

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.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 532x (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
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.
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
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
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.