Blog

pagina con preloader

Realizzare una pagina con preloader css3

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.

Demo Scarica il codice

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.

Demo Scarica il codice

Share and Enjoy !

0Shares
0 0

Chi è ?

Lucio Ticali è un Web & App developer con la passione per il web marketing,si occupa anche di tecniche di indicizzazione del sito e di promozione dello stesso (SEO e SEM).

Lascia la tua opinione