jQuery: effetto neve TV

L'effetto TV più comune da implementare con jQuery è sicuramente l'effetto neve, ossia la riproduzione di una delle più classiche interferenze per un televisore. L'esempio che segue riproduce appunto tale effetto usando il metodo toggleClass() unito ad un timer JavaScript per far alternare due immagini di sfondo in rapida sequenza. Il demo è stato originariamente inspirato al film The Ring. Un'avvertenza: l'effetto finale può risultare alquanto fastidioso per persone particolarmente sensibili ad animazioni molto rapide e ripetute. Se soffrite di particolari patologie neurologiche, siete pregati di non visionare il demo.

Per iniziare, ecco la nostra marcatura che, una volta applicati gli stili, riprodurrà l'aspetto di uno schermo di un televisore:

<div id="tv">

  <div class="noise"></div>

</div>

Ed ecco i nostri stili CSS:

#tv {
	width: 750px;
	height: 505px;
	background: url(monitor.jpg) no-repeat;
	margin: 0 auto;
}

div.noise {
	background: url(noise1.png) no-repeat;
	width: 688px;
	height: 388px;
	margin: 0 auto;
	position: relative;
	top: 33px;
}

div.noise2 {
	background: url(noise2.png) no-repeat;
	width: 688px;
	height: 388px;
	margin: 0 auto;
	position: relative;
	top: 33px;
}

Le due classi CSS, noise e noise2, creeranno l'effetto neve una volta alternate in rapida sequenza con jQuery:

$(function() {

  var interval = setInterval(function() {
  
    $('div.noise').toggleClass('noise2');
  
  
  }, 50);

});

Potete visionare il risultato finale in questa pagina.