Overlay jQuery al caricamento della pagina

Vediamo come creare un overlay con jQuery che appaia sullo schermo del visitatore all’apertura della pagina, ideale come trovata pubblicitaria!

[lightgrey_box] ATTENZIONE: Questa versione è obsoleta, ti consigliamo di leggere anche questo articolo: TrgReveal plugin  [/lightgrey_box]

A (grandissima) richiesta ecco l’articolo che vi servirà per far apparire un fantastico popUp in overlay grazie a JQuery, questo articolo è una continuazione di questo, nel quale spiegavo come crearlo attraverso l’uso di trigger.

Questa soluzione è l’ideale per “spingere” i vostri prodotti, iniziative, e articoli, è poco invasivo e molto leggero, pertanto può essere usato davvero su tutti i vostri progetti.

>> GUARDA LA DEMO

>> DOWNLOAD

Struttura dell’overlay

Impostiamo un div “contenitore” dell’overlay e un altro che conterrà il nostro BOX con tutte le nostre proposte/iniziative. Ecco il code:

HTML

<div class="overlay" id="overlay" style="display:none;"></div>

    <div id="box">

    	<div id="box-container">

    <h1 class="titolo_box">Questo e' un overlay</h1>

        <p class="sotto-titolo">Testo dell'overlay qui</p>

   <p class="testo-box">Qui puoi inserire informazioni pubblcitarie</p>

        <p class="chiudi"><img src="chiudi.png" alt="X" /></p>

        </div><!--box container-->

   </div>  <!--FINE BOX-->

CSS:

.chiudi{ font-size:18px; color:#000; font-weight:bold;position:absolute; right:14%; top:0%;  cursor:pointer;}

.overlay{
    background:#000;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
    cursor:pointer;
/*Trasperenza cross browser*/
opacity: .7; filter: alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";   

}

#box{ width:400px; height:300px; background-repeat:no-repeat; background-image:url(overlay-gb.png); display:none; z-index:+300; position:absolute; left:37%; top:20%; -moz-border-radius: 15px;  -webkit-border-radius: 15px;border-radius: 15px; }

#box-container{ margin:15px 40px 0px 0px;}

Come potete osservare ho reso invisibile l’overlay e il box così da poterli fare apparire in seguito. Per l’overlay potete usare anche un’immagine png o un pattern per renderlo più fluido e cross-browser (su IE7-6 la trasparenza in questo modo non funziona se non usando pesanti filtri).

A questo punto non ci resta che animare il tutto con jQuery:

<script>
//CREATO DA RICCARDO MEL -TARGETWEB.IT
$(document).ready(function() {

 $('#overlay').delay(1000).fadeIn('fast'); //cambia il valore di delay per temporizare di più l'overlay

     $('#box').delay(1000).fadeIn('slow');

     $(".chiudi").click(  //chiusura
     function(){
     $('#overlay').fadeOut('fast');
     $('#box').hide();
     });

	});

</script>

Le prime due righe di codice sono le più importanti, usando delay() ho temporizzato l’apparizione dei due elementi (in questo caso compaiono insieme), potete cambiare il valore tra parentesi in qualsiasi momento. Se non avessi usato delay() i due elementi sarebbero comparsi pressochè contemporaneamente alla pagina web, si sarebbe pertanto perso questo gradevole effetto. La seconda parte del codice è per la chiusura dell’overlay da parte dell’utente.

Risorse grafiche

DOWNLOAD GRAFICA

Potete altresì approfondire questo argomento seguendo questo mio articolo. Spero vi sia utile commentate!