jQuery: animare lo sfondo degli elementi

jQuery non può di per sè animare gli sfondi degli elementi, ma noi possiamo dare quest'illusione ricorrendo ai layer del posizionamento assoluto. Quindi avremo un elemento in primo piano e altri elementi sullo sfondo che saranno l'oggetto della nostra animazione. In questo modo creeremo un effetto visivo su due livelli: il primo livello, quello più vicino allo sguardo dell'utente, rimarrà sempre uguale, mentre il secondo livello, ossia lo sfondo, verrà animato. Useremo un'animazione ciclica con i timer JavaScript. Vediamo i dettagli.

Il primo livello è composto da un'intestazione contenuta in un elemento wrapper:

<div id="panels">

<h1>Title</h1>

</div>

Il secondo livello sarà composto da questa struttura che andremo ad aggiungere con jQuery prima dell'intestazione:

<div class="panel a">
	<img src="quotes.png"/>
</div>
<div class="panel b"></div>
<div class="panel c">
	<img src="quotes2.png"/>
</div>

Come abbiamo detto all'inizio, dobbiamo giocare con il posizionamento assoluto ed in particolare con la proprietà z-index per creare un ordine di layering:

#panels {
    width: 60em;
    height: 20em;
    background: silver;
    position: relative;
    margin: 0 auto;
}

#panels h1 {
  font-size: 10em;
  letter-spacing: 0.1em;
  font-weight: normal;
  height: 1em;
  margin: 0;
  width: 5em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.5em 0 0 -2.5em;
  text-transform: uppercase;
  text-align: center;
  z-index: 1;
  text-shadow: 3px 3px 3px #999;
}

div.panel {
  height: 100%;
  width: 20em;
  position: absolute;
  top: 0;
  display: none;
  z-index: 0;
}

div.panel img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 133px;
	height: 100px;
	margin: -50px 0 0 -78px;
} 

.a {
  background: #eee;
  left: 0;
}

.b {
  background: #999;
  left: 20em;
}

.c {
  background: #eee;
  left: 40em;
}

I tre pannelli ora sono nascosti alle spalle dell'intestazione e posizionati in modo da dividere il contenitore in tre quadrati di diverso colore di sfondo. Con jQuery dobbiamo creare quest'animazione ripetuta:

1. appare/scompare il pannello di sinistra
2. appare/scompare il pannello di centro
3. appare/scompare il pannello di destra

Ecco il codice:

$(function() {


   var panels = '<div class="panel a"><img src="quotes.png"/></div><div class="panel b"></div><div class="panel c"><img src="quotes2.png"/></div>';
   $(panels).insertBefore('#panels h1');
   
   
   function showPanels() {
   
   
       setTimeout(function() {
       
          
          $('div.c', '#panels').fadeOut().prev().prev().fadeIn(1000);
          
          setTimeout(function() {
          
            $('div.a', '#panels').fadeOut(1000).next().fadeIn(1000);
            
            setTimeout(function() {
            
            
                $('div.b', '#panels').fadeOut(1000).next().fadeIn(1000);
            
            
            }, 1000);
          
          
          }, 1000);
       
       
       
       }, 1000);
   
   
   
   }
   
   setTimeout(function() {
   
   
     showPanels();
     
     setTimeout(arguments.callee, 3000);
   
   
   }, 1000);



});

La durata complessiva del ciclo di animazioni è di 3000 millisecondi. Per questo motivo, il valore dell'ultima chiamata a setTimeout() (che crea una funzione ciclica usando il riferimento arguments.callee) deve essere pari alla durata complessiva del ciclo di animazioni.

Potete visionare l'esempio finale in questa pagina.