jQuery: animazioni cicliche

  • jQuery
  • Gabriele Romanato

Le animazioni cicliche si realizzano in jQuery tramite i timer JavaScript. Incrementando e quindi resettando un contatore possiamo eseguire un loop tra immagini e testo e creare l'effetto finale degli elementi che appaiono e scompaiono a ritmo costante. Vediamo i dettagli dell'implementazione.

Partiamo dalla seguente marcatura:


<div id="animated">
	<img src="anim1.png" alt="" id="anim" />
	<img src="animline.png" alt="" id="animline" />
	<div id="animtext"></div>
</div>

L'elemento anim avrà il suo attributo src modificato per mostrare varie immagini, animline resterà fisso mentre animtext mostrerà del testo diverso ogni volta. Ecco gli stili CSS:


#animated {
	width: 400px;
	height: 400px;
	position: relative;
	margin: 0 auto;
}

#animated #anim {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	margin-top: -50px;
	left: 0;
	display: none;
}

#animated #animline {
	position: absolute;
	top: 50%;
	left: 100px;
	width: 100px;
	height: 100px;
	margin-top: -50px;
	display: none;
}

#animated #animtext {
	position: absolute;
	width: 150px;
	text-align: center;
	font: small Arial, sans-serif;
	bottom: 133px;
	right: 125px;
	display: none;
}

La sequenza delle animazioni è la seguente:

  1. Appare la prima immagine, appare la riga, appare il primo testo
  2. Appare la seconda immagine, appare la riga, appare il secondo testo
  3. Appare la terza immagine, appare la riga, appare il terzo testo

La sequenza si ripete all'infinito. Dopo ogni fase tutti gli elementi scompaiono. Vediamo il codice jQuery:


var images = ['anim1.png', 'anim2.png', 'anim3.png'];
var texts = ['Lorem ipsum dolor', 'Sit Amet', 'Ideo Autem'];
var counter = -1;
var element = $('#animated');


$(document).ready(function() {


  var interval = window.setInterval(function() {
  
    counter += 1;
    
    if(counter == 3) {
      
      
        counter = 0;
      
        
     }
     

    
    element.children().hide();
    
    element.find('#anim').attr('src', images[counter])
     .show(1000, function() {
     
        $(this).next().show(1000, function() {
        
      
          $(this).next().text(texts[counter]).show(1000);
      
      
      });
      
    });

}, 3000);  


});

Usiamo il contatore del timer come un indice dell'array di immagini e testi. Per poter funzionare è necessario che l'intervallo del timer sia uguale alla somma complessiva delle durate delle animazioni (in questo caso 3000 millisecondi).

Potete visionare l'esempio finale in questa pagina.

Torna su