jQuery Tabs : tab slider con effetto specchio css3

Oggi ho deciso di proporvi questa mia semplice realizzazione, si tratta di tabs animate in jQuery con effetto “specchio” in css3, molto utili come showcase di immagini,foto e testo.

Ora vi starete chiedendo: che cos’hanno queste tue tab in più di tutte le altre? bhè ho deciso di rivoluzionare un pò il concetto di tab statica facendo uso del mitico plugin jQuery timthumb, e di un effetto “specchio” davvero molto particolare che potete trovare a questo indirizzo. Il tutto ovviamente lo animerò grazie alla potenza (infinita) di JQuery.

VISITA LE DEMO

DISPONIBILE ANCHE SU JQUERY.COM

Iniziamo!

01. Costruiamo la struttura delle nostre tabs

Le tabs avranno una struttura molto semplice: Una parte di “selezione” sarà visibile e permetterà ai visitatori di cambiare le tabs. la parte di “contenuto” invece conterrà l’immagine, il testo e le foto che vogliamo far apparire ciclicamente.

<div id="contenitore-tab">

    <div id="tab1" class="tab">
    <img src="tua_img.jpg" class="img_tab" /> 

    <div class="hover"></div>

    </div>

    <div id="tab2" class="tab">
    <img src="tua_img2.jpg" class="img_tab" /> 

    <div class="hover"></div>

    </div>

    <div id="tab3" class="tab">
    <img src="tua_img3.jpg" class="img_tab" />

    <div class="hover"></div>

    </div>

    <div id="tab4" class="tab">
    <img src="tua_img4.jpg" class="img_tab" /> 

     <div class="hover"></div>

    </div>

    </div><!--FINE CONTENITORE THUMB-->

    <ul id="selettore-tab">
    <li class="sel_tab1"></li>
    <li class="sel_tab2"></li>
    <li class="sel_tab3"></li>
    <li class="sel_tab4"></li>

</ul> <!--FINE MENU SELEZIONE TAB-->

Ora che abbiamo costruito lo scheletro in html possiamo passare alla stilizzazione di base tramite i CSS.

/*NECESSARI PER PLUGIN TABS*/

#contenitore-tab{ width:960px;  clear:both; margin:0px 0px 10px 50px; margin:0; padding:0;}

#tab1{  height:300px; background-color:#060}

#tab2{ height:300px; background-color:#FF6; display:none;}

#tab3{ height:300px; background-color:#FF6; display:none;}

#tab4{ height:300px; background-color:#FF6; display:none;}

#tab5{ height:300px; background-color:#FF6; display:none;}

#tab6{ height:300px; background-color:#FF6; display:none;}

#selettore-tab { width:800px; clear:both;}

#selettore-tab li{ cursor:pointer; float:left; list-style:none; margin:0px 5px 0px 5px; padding:10px; border:1px solid #09C;}

Come vedete ho reso invisibili i contenitori principali (tranne quello di partenza ovviamente), in secondo luogo ho settato la larghezza delle immagini che saranno contenute nel container a 960px, ovviamente potete cambiare questo valore come volete a seconda delle esigenze. Anche l’altezza di tab1…4 può essere cambiata.

Ovviamente ho dato in questo esempio uno stile di base, ma potete davvero sbizzarirvi a crearne di vostri, in modo semplice e veloce. Ad esempio applicando un semplice (ma elegante)  bordo al #contenitore-tab.

02. Animiamo le nostre tab con jQuery

Come sempre per prima cosa includete la libreria jQuery dentro i tag <head>

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

Fatto questo implementate questo script:

<script type="text/javascript">

$(document).ready(function() {

            $(".sel_tab1").click(
            function(){
            $("#contenitore-tab div").hide();//eliminio tutte le tab
            $("#tab1").fadeIn();//faccio apparire quella che mi serve

            });

            $(".sel_tab2").click(
            function(){
	    $("#contenitore-tab div").hide(); //eliminio tutte le tab
            $("#tab2").fadeIn(); //faccio apparire quella che mi serve
            });

	    $(".sel_tab3").click(
            function(){
            $("#contenitore-tab div").hide();//eliminio tutte le tab
            $("#tab3").fadeIn();//faccio apparire quella che mi serve

            });

	    $(".sel_tab4").click(
            function(){
            $("#contenitore-tab div").hide();//eliminio tutte le tab
            $("#tab4").fadeIn();//faccio apparire quella che mi serve

            });

	//NOTA: metti "slow" dentro la parentesi del fadeIn() per farlo apparire più lento o fast più veloce

    });//FINE DOM

</script>

bene!, ora salvate il documento e apritelo, dovreste vedere qualcosa del genere, ovvero tab animate con immagini.  A questo punto andiamo più nel difficile…

03. Effetto Glass Hover CSS3 (by Mokey’s head)

Applichiamo lo script effetto glass css3 alle nostre immagini. per comodità assegnate anche la classe alla vostra immagine. Per farlo dobbiamo effettuare un piccola modifica al file JS e alla struttura generale dello script.

SCRIPT JS

<script type="text/javascript">

$(document).ready(function() {

	$('#contenitore-tab').append($('#copyright'));

          $(".sel_tab1").click(
            function(){
            $("#contenitore-tab div").hide();//eliminio tutte le tab
            $("#tab1,.hover").fadeIn();//aggiungo anche .hover per far ri-apparire l'effetto 

            });

         $(".sel_tab2").click(
            function(){
	    $("#contenitore-tab div").hide(); //eliminio tutte le tab
            $("#tab2,.hover").fadeIn(); //faccio apparire quella che mi serve
            });

	$(".sel_tab3").click(
            function(){
            $("#contenitore-tab div").hide();//eliminio tutte le tab
            $("#tab3,.hover").fadeIn();//faccio apparire quella che mi serve

            });

	$(".sel_tab4").click(
            function(){
            $("#contenitore-tab div").hide();//eliminio tutte le tab
            $("#tab4,.hover").fadeIn();//faccio apparire quella che mi serve

            });

	//NOTA: metti "slow" dentro la parentesi del fadeIn() per farlo apparire più lento o fast più veloce

    });//FINE DOM

</script>

FOGLIO DI STILE CSS

/*NECESSARI PER PLUGIN TABS*/

#contenitore-tab{ width:960px;  clear:both; margin:0px 0px 10px 50px; margin:0; padding:0; z-index:200;}

#tab1{  height:300px; background-color:#060}

#tab2{ height:300px; background-color:#FF6; display:none;}

#tab3{ height:300px; background-color:#FF6; display:none;}

#tab4{ height:300px; background-color:#FF6; display:none;}

#tab5{ height:300px; background-color:#FF6; display:none;}

#tab6{height:300px; background-color:#FF6; display:none;}

#selettore-tab { width:120px; float:right; margin:0px 0px 10px 0px; z-index:9999;}

#selettore-tab li{ cursor:pointer; float:left; list-style:none; margin:0px 5px 0px 5px; padding:8px; background-image:url(images/bullets.png); background-position:50% top; }

#selettore-tab li:hover{ cursor:pointer; float:left; list-style:none; margin:0px 5px 0px 5px; padding:10px; background-image:url(images/bullets.png); background-position:50% bottom; }

.img_tab{
	float:left;
	position:relative;
    -moz-box-shadow: 0px 1px 2px #999;
	-webkit-box-shadow: 0px 1px 2px #999;
  	box-shadow: 0px 1px 2px #999;
	-webkit-transition: -moz-border-radius .2s ease-in-out;
	-moz-transition: border-radius .2s ease-in-out;}

/*SOPRA ALL'IMMAGINE METTO UN DIV DI OPACITA E GRADIENTE CSS3*/
.hover{position:relative;
	width:960px;
	height:450px;

	background: -moz-radial-gradient(50% 70% , circle farthest-side,
                             rgba(255, 255, 255, 0.2) 75%,
                             rgba(255, 255, 255, 0.5) 90%, #FFFFFF 115%);
	background: -webkit-radial-gradient(50% 70% , circle farthest-side,
                            rgba(255, 255, 255, .2) 75%,
                            rgba(255, 255, 255, 0.5) 90%, #FFF 115%);
	display:block;

	-webkit-transition: opacity .2s ease-in-out;
	-moz-transition: opacity .2s ease-in-out;

	}

.hover:hover{opacity:0;}/*SE IL MOUSE VA SOPRA FaI SCOMPARIRE IL DIV HOVER*/

STRUTTURA HTML

<div id="contenitore-tab">

    <div id="tab1" class="tab">
    <img src="tua_img1.jpg" class="img_tab" /> 

    <div class="hover"></div>

    </div>

    <div id="tab2" class="tab">
    <img src="tua_img2.jpg" class="img_tab" /> 

    <div class="hover"></div>

    </div>

    <div id="tab3" class="tab">
    <img src="tua_img3.jpg" class="img_tab" />

    <div class="hover"></div>

    </div>

    <div id="tab4" class="tab">
    <img src="tua_img4.jpg" class="img_tab" /> 

     <div class="hover"></div>

    </div>

    </div><!--FINE CONTENITORE THUMB-->

    <ul id="selettore-tab">
    <li class="sel_tab1"></li>
    <li class="sel_tab2"></li>
    <li class="sel_tab3"></li>
    <li class="sel_tab4"></li>

</ul> <!--FINE MENU SELEZIONE TAB-->

Vi invito a leggere i commenti per maggiori delucidazioni. In ogni caso ho aggiunto un div  chiamato hover, che di fatto sta sopra l’immagine della tab. Quando si passa il mouse il div viene data opacità=0 via css per renderlo di fatto invisibile. Per creare l’effetto specchio vengono usati i gradienti css3 con effetto radiale.

04. Rendiamo le tab dinamiche con timthumb

Una piccola prefazione, sa volete applicare le immagini “dinamiche” tramite questo script, aprite il file html solo online o all’interno di un server web (tipo xampp) dato che richiede php, altrimenti non funziona!

bene detto questo applicare lo script thimthumb è davvero semplicissimo:

A) Scaricatelo dal sito ufficiale

B) Estraete il file thimthumb.php e copiatelo nella stessa root del vostro index (per comodità).

C) Applicatelo così nelle struttura html:

[...]
    <div id="tab1" class="tab">
    <img src="timthumb.php?src=images/tab1.jpg&amp;a=r&amp;h=450&amp;w=960&amp;q=90" class="img_tab" />
    <div class="hover"></div>
    </div>
[...]

A questo punto se avete fatto tutto bene l’immagine dovrebbe essere di altezza (h) e larghezza (w) come indicati nello script timthumb e croppati al centro(a=r), qualsiasi dimensione essi abbiano, in modo dinamico e senza sforzi. Per comodità di caricamento ho impostato anche la qualità (q=80), così se la foto è troppo grande la riduco automaticamente. Per ulteriori info qui.

Potete vedere un esempio nella demo del mio script qui sotto.

05. Codice completo dello script

SCRIPT

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

	$('#contenitore-tab').append($('#copyright'));

            $(".sel_tab1").click(
            function(){
            $("#contenitore-tab div").hide();//eliminio tutte le tab
            $("#tab1,.hover").fadeIn();//faccio apparire quella che mi serve

            });

            $(".sel_tab2").click(
            function(){
			$("#contenitore-tab div").hide(); //eliminio tutte le tab
            $("#tab2,.hover").fadeIn(); //faccio apparire quella che mi serve
            });

			$(".sel_tab3").click(
            function(){
            $("#contenitore-tab div").hide();//eliminio tutte le tab
            $("#tab3,.hover").fadeIn();//faccio apparire quella che mi serve

            });

			$(".sel_tab4").click(
            function(){
            $("#contenitore-tab div").hide();//eliminio tutte le tab
            $("#tab4,.hover").fadeIn();//faccio apparire quella che mi serve

            });

//NOTA: metti "slow" dentro la parentesi del fadeIn() per farlo apparire più lento o fast più veloce

    });//FINE DOM

</script>

CSS

#contenitore-tab{ width:960px;  clear:both; margin:0px 0px 10px 50px; margin:0; padding:0; z-index:200;}

#tab1{  height:300px; background-color:#060}

#tab2{ height:300px; background-color:#FF6; display:none;}

#tab3{ height:300px; background-color:#FF6; display:none;}

#tab4{ height:300px; background-color:#FF6; display:none;}

#tab5{ height:300px; background-color:#FF6; display:none;}

#tab6{height:300px; background-color:#FF6; display:none;}

#selettore-tab { width:120px; float:right; margin:0px 0px 10px 0px; z-index:9999;}

#selettore-tab li{ cursor:pointer; float:left; list-style:none; margin:0px 5px 0px 5px; padding:8px; background-image:url(images/bullets.png); background-position:50% top; }

#selettore-tab li:hover{ cursor:pointer; float:left; list-style:none; margin:0px 5px 0px 5px; padding:10px; background-image:url(images/bullets.png); background-position:50% bottom; }

.img_tab{
	float:left;
	position:relative;
    -moz-box-shadow: 0px 1px 2px #999;
	-webkit-box-shadow: 0px 1px 2px #999;
  	box-shadow: 0px 1px 2px #999;
	-webkit-transition: -moz-border-radius .2s ease-in-out;
	-moz-transition: border-radius .2s ease-in-out;}

/*SOPRA ALL'IMMAGINE METTO UN DIV DI OPACITA E GRADIENTE CSS3*/
.hover{position:relative;
	width:960px;
	height:450px;

	background: -moz-radial-gradient(50% 70% , circle farthest-side,
                             rgba(255, 255, 255, 0.2) 75%,
                             rgba(255, 255, 255, 0.5) 90%, #FFFFFF 115%);
	background: -webkit-radial-gradient(50% 70% , circle farthest-side,
                            rgba(255, 255, 255, .2) 75%,
                            rgba(255, 255, 255, 0.5) 90%, #FFF 115%);
	display:block;

	-webkit-transition: opacity .2s ease-in-out;
	-moz-transition: opacity .2s ease-in-out;

	}

.hover:hover{opacity:0;}/*SE IL MOUSE VA SOPRA FaI SCOMPARIRE IL DIV HOVER*/

HTML

<div id="contenitore-tab">

    <div id="tab1" class="tab">
    <img src="timthumb.php?src=images/tab1.jpg&amp;a=r&amp;h=450&amp;w=960&amp;q=90" class="img_tab" /> 

    <div class="hover"></div>

    </div>

    <div id="tab2" class="tab">
    <img src="timthumb.php?src=images/tab2.jpg&amp;a=r&amp;h=450&amp;w=960&amp;q=90" class="img_tab" /> 

    <div class="hover"></div>

    </div>

    <div id="tab3" class="tab">
    <img src="timthumb.php?src=images/tab3.jpg&amp;a=r&amp;h=450&amp;w=960&amp;q=90" class="img_tab" />

    <div class="hover"></div>

    </div>

    <div id="tab4" class="tab">
    <img src="timthumb.php?src=images/tab4.jpg&amp;a=r&amp;h=450&amp;w=960&amp;q=90" class="img_tab" /> 

     <div class="hover"></div>

    </div>

    </div><!--FINE CONTENITORE THUMB-->

    <ul id="selettore-tab">
    <li class="sel_tab1"></li>
    <li class="sel_tab2"></li>
    <li class="sel_tab3"></li>
    <li class="sel_tab4"></li>

</ul> <!--FINE MENU SELEZIONE TAB-->

06. Demo e  download (tema shiny) 

big-antemprima-tab-jquery

VISITA LE DEMODOWNLOAD 

07. Informazioni e prossime feature

versione: 1.0

Nelle prossime feature vorrei integrare il plugin per wordpress, e sicuramente creare nuovi temi. Se avete altre idee fatemele sapere nei commenti!

Cosa ne pensate? Mi raccomando commentate e condividete =D

  1. Bravo Riccardo, bella risorsa!
    Se posso ti suggerisco un paio di cose, la prima probabilmente è un pò scontata, ovvero comprimere il tutto in un plugin! La seconda al fine di migliorare l’usabilità ti suggerisco di evitare il ritorno in cima alla pagina nel caso di click su uno dei “pallini”!

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:

Pennelli effetto luce "soft" per Photoshop

Pennelli effetto luce "soft" per Photoshop