Capita spesso nelle nostre pagine di aver bisogno di aprire un popup o una finestrella che vogliamo evidenziare dal resto della pagina.

Traendo ispirazione da un progetto di Hakim El Hattab che si chiama “Avgrund“, in questo breve e semplice tutorial vedremo come utilizzare CSS3 e un briciolo di jQuery per aprire i nostri popup in maniera molto evidente e abbastanza spettacolare, ottenendo un risultato tipo questo:

Animation

L’HTML

La struttura HTML di questa pagina è molto semplice:

In sostanza c’è una “cover”, un “popup” e un blocco di “contents” –  e basta.

Il CSS

La parte dello stile è quella più interessante di tutte. E’ qui infatti che usiamo transizioni, filtri e trasformazioni CSS3 per far fare agli elementi della pagina quello che vogliamo noi. Cominciamo dal body :

Qui stiamo dicendo che quando viene aggiunta la classe “sfoca” il body  deve rimpicciolirsi al 90%.

Adesso il contents , ovvero il contenuto principale della pagina (che abbiamo messo dentro un tag article ):

che vuol dire “sfoca questo contenuto di 2 pixel” (ovviamente solo quando è attiva la classe “sfoca”).

Passiamo poi alla cover, ovvero alla parte di sfondo che ci darà l’effetto opaco e che diventa visibile solo al momento della sfocatura:

Ecco poi il popup – da notare qui la trasformazione delle dimensioni (da 0.8 a 1.1) per dargli un effetto di ingradimento:

Infine, le transizioni per dare al tutto un piacevole effetto di movimento fluido:

Il JavaScript (jQuery)

La parte di scripting è di una semplicità quasi imbarazzante. Semplicemente leghiamo all' onclick  dei bottoni l’aggiunta o la rimozione della classe “sfoca”:

Et voilà!

Ecco fatto! Mettendo insieme questi pezzi riusciamo ad ottenere un effetto del genere:

Ed ecco il sorgente completo:

 

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis