Creare una pagina errore 404 animata

Quante volte puo’ succedere di non trovare in un sito quello che cerchiamo? Ogni volta che succede veniamo reidirizzati ad una pagine di errore 404.

Abbiamo gia’ visto come costruire la pagina in maniera statica, oggi vogliamo costruire una pagina di errore 404 animata. L’esemppio che andro’ a fare potra’ essere personalizzato al meglio molto facilmente.

Il codice HTML

Come si fa in questi casi analzziamo subito il codice della file 404.html che getta le basi della struttura della nostra pagina.

Pagina errore 404 | iwebdesigner Demo







Pagina non trovata

Controlla bene quello che stai cercando.


iwebdesigner

Niente di complicato; c’e’ un titolo, un richiamo al CSS->styles.css.

Il div piu’ importante e’ quello del razzo, chiamato rocket. Questo div e’ collegato allo script che viene richiamato alla fine della pagina script.js. Se volete cambiare il nome del div ricordate di cambiare anche il suo richiamo all’interno del file script.js.

Il codice CSS

*{
margin:0;
padding:0;
}

body{
background:url('img/bg.png') no-repeat center center #1d1d1d;
color:#eee;
font-family:Corbel,Arial,Helvetica,sans-serif;
font-size:13px;
}

#rocket{
width:275px;
height:375px;
background:url('img/rocket.png') no-repeat;
margin:140px auto 50px;
position:relative;
}

/*    Two steam classes. */

.steam1,
.steam2{
position:absolute;
bottom:78px;
left:50px;
width:80px;
height:80px;
background:url('img/steam.png') no-repeat;
opacity:0.8;
}

.steam2{

/*    .steam2 shows the bottom part (dark version)
*    of the background image.
*/

background-position:left bottom;
}

hgroup{

/* Using the HTML4 hgroup element */

display:block;
margin:0 auto;
width:850px;
font-family:'Century Gothic',Calibri,'Myriad Pro',Arial,Helvetica,sans-serif;
text-align:center;
}

h1{
color:#76D7FB;
font-size:60px;
text-shadow:3px 3px 0 #3D606D;
white-space:nowrap;
}

h2{
color:#9FE3FC;
font-size:18px;
font-weight:normal;
padding:25px 0;
}

/* Only Needed For The Demo Page */

p.createdBy{
font-size:15px;
font-weight:normal;
margin:50px;
text-align:center;
text-shadow:none;
}

a, a:visited {
text-decoration:none;
outline:none;
border-bottom:1px dotted #97cae6;
color:#97cae6;
}

a:hover{
border-bottom:1px dashed transparent;
}

Il razzo e’ in posizione relativa, le steam, ovvero l’ombra della fiamma, e’ messa in posizione assoluto; in questa maniera potra’ seguire il movimento del razzo.

Il codice jQuery

Qui e’ racchiuso il codice inserito nel gia’ citato script.js e che crea l’animazione del gas di scarico del razzo. Vediamo cosa c’e’ scritto:

$(window).load(function(){

// We are listening for the window load event instead of the regular document ready.

function animSteam(){

// Create a new span with the steam1, or steam2 class:

$('',{
className:'steam'+Math.floor(Math.random()*2 + 1),
css:{
// Apply a random offset from 10px to the left to 10px to the right
marginLeft    : -10 + Math.floor(Math.random()*20)
}
}).appendTo('#rocket').animate({
left:'-=58',
bottom:'-=100'
}, 120,function(){

// When the animation completes, remove the span and
// set the function to be run again in 10 milliseconds

$(this).remove();
setTimeout(animSteam,10);
});
}

function moveRocket(){
$('#rocket').animate({'left':'+=100'},5000).delay(1000)
.animate({'left':'-=100'},5000,function(){
setTimeout(moveRocket,1000);
});
}

// Run the functions when the document and all images have been loaded.

moveRocket();
animSteam();
});

La funzione animSteam{} e’ quella che crea l’effetto fumo. Quando questa viene richiamata dallo script, esegue l’animazione, e la ripete ogni 10 millisecondi. Lo script sceglie a caso tra le classi steam1 e steam2 e compensa l’arco di iterazione tra le due con un margin-left. Nella funzione animate{} sposta l’elemento 58px a sinistra e 100px verso il basso. La funzione moveRocket() muove il razzo lentamente da sinistra a destra modificando le proprieta’ del CSS.

Ecco e’ tutto abbiamo la nostra pagina 404 animata e completamente personalizzabile.