JSFiddle - React, Tailwind, and code Playground
HTML
degré de flou: <input type="text" value="3"/><button>Refresh</button>
CSS
.container{
position: absolute;
overflow: hidden;
background-size: contain;
top: 40px;
}
JavaScript
var img = {
toto: null,
source: null,
_initialize: function(){
var me = this;
this.source = 'http://t1.gstatic.com/images?q=tbn:ANd9GcSaD8DvoMS_i1MPFXa-w6Zan2FrAgSV_K32kuMVl4htw2gAV23YxGO3Th8J';
$('button').click(function(){
me.setImg();
});
this.setImg();
return this;
},
setImg: function(){
$('.container').remove();
var me = this;
var blur = $('input').val();
var clones = new Array();
var $container = $('<div class="container"></div>');
$('body').prepend($container);
$container.css('width', '284px').css('height', '177px');
var $img = $container.clone();
$img.css('background', 'url("'+me.source+'")').css('opacity',.2);
for(var i = 0; i < 15; i++){
var $clone = $img.clone();
$clone.css('left', ((Math.random()*2)-1)*blur).css('top',((Math.random()*2)-1)*blur);
$container.prepend($clone);
}
}
}
img._initialize();