Il segreto delle animazioni casuali sulle immagini sta nella selezione degli elementi usati come maschera sovrapposta all'immagine corrente. Se per esempio all'immagine sono stati sovrapposti 25 blocchi, dobbiamo generare un numero casuale compreso tra 0 e 26 (il metodo random() dell'oggetto Math vuole un intero in più del numero stabilito). Scopriamo insieme questo demo.
Il cuore dell'animazione è racchiuso in questa funzione:
var animate = function() {
var blocks = $('div', '#wrapper');
timer = setInterval(function() {
index++;
if(index == pieces) {
index = -1;
}
var r = Math.floor(Math.random()*25);
var block = blocks.eq(r);
if(block.is(':hidden')) {
block.fadeIn(500);
} else {
block.fadeOut(500);
}
}, 500);
};
Ecco come avviene la selezione:
var r = Math.floor(Math.random()*25);
var block = blocks.eq(r);
Volendo perfezionare il demo potremmo evitare di animare due volte lo stesso blocco, ma la nota dolente è che la generazione di numeri casuali da parte di JavaScript è solo pseudo-casuale e assolutamente poco precisa.
Spero che troviate questo demo utile.