JSFiddle - React, Tailwind, and code Playground
HTML
<div id='img-array'>
</div>
<a href='#' id='push' >жми</a>
CSS
.item{
position:absolute;
background-color:rgb(255,255,255);
opacity:1;
width:18.7px;
height:19px;
z-index:1;
}
body {
background-image:url('http://geeksguides.net/wp-content/uploads/2011/06/facebook-friends.jpg');
background-repeat:no-repeat;
}
a{
position:absolute;
left:520px;
}
.hidden{
opacity:0;
}
}
@-moz-keyframes item-anim{
0%{opacity:0.7;}
100%{opacity:0;}
}
.item-anim{
opacity:0;
}
JavaScript
var x=0,y=0,id=0,t,element;
for( var i = 0; i < 20; i++ ) {
for( var j = 0; j < 27; j++ ){
element = $("<div class='item' id='no_"+id+"'></div>").css({top:y,left:x});
element.appendTo('#img-array');
x = x + 18.7;
id = id + 1;
}
x=0;
y=y+19;
}
$.fn.shuffle = function() {
return this.each(function(){
var items = $(this).children().clone(true);
return (items.length) ? $(this).html($.shuffle(items)) : this;
});
}
$.shuffle = function(arr) {
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
var list = [];
for (var i = 0; i <= 540; i++) {
list.push(i);
}
list = $.shuffle(list);
$('#push').click(function(){
i=0;
setInterval(function() {
$("#no_"+list[i]).fadeOut( 200 );
i++;
}, 5);
});