Overlay jQuery al caricamento della pagina

Scritto Aggiornato il Di Riccardo Mel

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

grafica-overlay

DOWNLOAD GRAFICA

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

 

  1. Ciao Riccardo
    volevo chiederti due cose, la prima se è possibile temporizzare la chiusura dell’overlay senza che sia l’utente a farlo in modo da renderlo meno “invasivo” eventualmente come cambierebbe il codice che hai scritto e se è possibile in questo caso l’utente avrebbe sempre la possibilità di eventualmente cliccare su un link che inseriremo nell’overlay oppure no?
    Poi volevo sapere se questo overlay può essere utilizzato come quelli che compaiono solo quando passi con il mouse su una scritta/comunicazione che vuoi mettere in evidenza, l’esempio di cui parlo lo si vede proprio nella home di jquery.com
    Grazie Alfonso

    Rispondi
    1. if( $("#box,#overlay").is(':visible') ) {
 		  	$(this).delay(1000).fadeOut("fast");
			}
			else { //scrivi qui il resto del codice relativo alla chiusura "umana" da parte dell'utente click funciont etc etc}

      Questo dovrebbe fare al caso tuo 😉

      Per l’esempio di cui parli lo puoi fare benissimo, ma quello non è propriamente un overlay di questo tipo… quello che vedi molto probabilmente è un tooltip moddato:

      http://www.targetweb.it/tooltip-grafico-con-jquery/

      Rispondi

  3. Riccardo,
    scusa se solo ora rispondo ma fino a pochi minuti fa mi dava che il mio post era ancora in fase di convalida.
    Innanzitutto grazie per avermi inserito la parte di codice per risolvere la prima info, e ancor di più per la seconda che rettifica una mia erronea richiesta, si era proprio quello a cui mi riferivo, al tooltip.

    Rispondi

    1. Figurati Alfonso! in ogni caso volendo puoi adattare anche questa soluzione usando come selettore per l’apertura i vari link come viene mostrato nel sito jQuery, spero ti sia di aiuto!

      Rispondi

  7. questo script mi è stato utilissimo per risolvere un problema ma come faccio a gestire l’apertura di questo box all’apertura della pagina di ritorno da un form ( come conferma ) per esempio ritornando dal form con pagina.htm?box o pagina.htm#box avevo visto una cosa simile tramite un alert sempre con javascript ma alla grafica non piace 🙁 🙁

    Rispondi

      1. grazie riccardo per la risposta però o sbaglio qualcosa nel codice oppure non mi sono spiegato bene io devo solo visualizzare questo overlay che conferma l’invio dei dati del form adesso ogni volta che apri la pagina esce usando questo codice io invece vorrei che questo overlay esca solo quando dal php che mi manda la mail mi ritona l’url pagina.htm?success per esempio non devo caricare niente nella pagina devo solo aprire l’overlay solo se si ritorna con quel codice se no non fa niente mi si apre la pagina normalmente

        Rispondi

    1. Ciao Deborah, si certo funziona anche se non posso esserti molto utile perchè non ho mai usato quella piattaforma. IN ogni caso basta inserire il codice nel tuo tema 😉

      Rispondi

  9. ciao riccardo, ho provato ad inserire questo overlay nel mio sito, e facendo le prove in locale, uso dw, funziona tutto tranne la x della chiusura, oltretutto il div del mio menu non va in trasparenza come tutta la pagina, grazie per la risposta

    Rispondi

  10. Grazie per la tempestività della risposta

    credo anche io sia di un z-indez, perchè alcuni div del sito rimangono accesi e non vanno in trasparenza, ma aimè non so metter mani, forse mi conviene rinunciare per ora…comunque l’animazione sulla x, al passaggio del mouse funziona….grazie comunque

    Rispondi

  12. Quali sono i giusti accorgimenti per applicare questo metodo a worpdress (diciamo al tema base twenty ten per esempio)? Aggiungere quanto sopra ad index.php del tema è il primo passo….

    Rispondi

  14. ciao, come posso applicare la tua guida utilizzando il software per siti web WYSIWYG Web Builder 10? perdona l’ignoranza

    Rispondi

  15. Ciao, spero ancora leggerai visti gli anni che sono passati! 🙂
    Sto cercando di inserire l’effetto in un sito html che ho già creato, però non riesco a farlo funzionare. Mi oscusa ma non mi apre la finestrelle overlay.
    Forse sbaglio coi i css?! Io non ho messo style /style nell’html, ma ho creato un file css apposito, richiamato nell’html, ma sono un novellino, e sbaglio qualcosa. Però non mi arrendo….in attesa di lumi, provo e riprovo!

    Grazie mille!

    Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Font Inspiration creativo: Just Old Fashion

Font Inspiration creativo: Just Old Fashion
twitch