Tempo di lettura: 3 minuti
Se volete evitare che gli utenti fissino pagine bianche al caricamento del vostro sito forse è il caso di realizzare una pagina con preloader.
Pagina con preloader
Oggi sono tanti i siti che utilizzano un preloader al caricamento delle loro pagine. Questo per evitare che i visitatori durante l’apertura di queste evitino di vedere sezioni scomposte o immagini lente al caricamento. Geniale non trovate?
In un precedente tutorial abbiamo visto come crearlo con l’utilizzo dei soli css3. Questi però era incompleto in quanto il preloader deve finire quando la pagina ha terminato il caricamento.
Quindi in questo andremo a modificare o, se volete, a migliorare quello precedente.
Struttura html
Mettiamoci all’opera riaprite il file index.html ed andate ad aggiungere le seguenti righe:
<div id="loader-wrapper"> <div id="loader"></div> <div class="loader-section section-left"></div> <div class="loader-section section-right"></div> </div>
Salvate il file.
File css
Quindi iniziamo a modificare lo stile per la pagina con preloader riaprendo il file style.css ed aggiungendo le seguenti righe:
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #222222;
z-index: 1000;
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
Diciamo che ancora non va bene in quanto lo stile crea una pagina scura sovrapponendosi alla nostra animazione per cui modifichiamo l’attributo z-index del div #loader:
#loader {
z-index: 1001; /* anything higher than z-index: 1000 of .loader-section */
}
h1 {
color: #EEEEEE;
}
Come potete notare ho modificato anche il colore del tag h1.
Salvate il file.
Creiamo il contenuto predefinito
Ora andiamo a creare il contenuto da visualizzare a preloader terminato:
<div id="content"> <h2>This is our page title</h2> <p>Lorem ipsum dolor sit amet.</p> </div>
Quindi a stilizzarlo:
#content {
margin: 0 auto;
padding-bottom: 50px;
width: 80%;
max-width: 978px;
}
Aggiungiamo la transizione al preloader
Inserite il seguente codice nel file style.css:
/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(-100%); /* IE 9 */
transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(100%); /* IE 9 */
transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
}
Notate che abbiamo aggiunto una classe loaded.
Aggiungiamo una dissolvenza:
.loaded #loader {
opacity: 0;
}
Aggiungiamo una visibility:hidden a loader-wrapper:
.loaded #loader-wrapper {
visibility: hidden;
}
Aggiungiamo un po di jquery
Perchè tutto funzioni dobbiamo aggiungere un paio di righe jquery:
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 2000);
});
Salvate il file con nome script.js e collegatelo alla pagina non dimenticandoci delle librerie jquery:
<!--jquery--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="script.js"></script>
Copiate il codice nel file index.htm all’nterno del tag head.
Spero sia tutto chiaro, commentate ed alla prossima.
