block image distortion

In this example below you will see how to do a block image distortion with some HTML / CSS and Javascript

Forked from mattjqueen's Pen block image distortion.

Thumbnail
This awesome code was written by riginosk, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright riginosk ©
  • HTML
  • CSS
  • JavaScript
    <section class="panel">
  <div class="grid"></div>
</section>

/*Downloaded from https://www.codeseek.co/riginosk/block-image-distortion-opoaBR */
    body {background-color:#09c;}

.panel {
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

.block {
  float:left;
  background-position: center center; 
  background-size:cover;
  background-attachment: fixed; 
  width: 60px;
  height: 60px;
}



/*Downloaded from https://www.codeseek.co/riginosk/block-image-distortion-opoaBR */
    var objNum = 5000;
var initScale = 90;
var scales = [10,5,3,2,1,0,-9,-8,-70,-20];

for (i=0; i<objNum; i++) {
  $block = $('<div class="block"></div>');
  $('.grid').append($block); 
}

function setImage(obj,img,s) {
  obj.css({'background-image':'url('+img+')'});
  obj.css({'background-size':s+'%'});
}

$('.block').each(function(){
  var scale = scales[Math.floor(Math.random()*scales.length)]; setImage($(this),'https://s3-us-west-2.amazonaws.com/s.cdpn.io/274760/H21020_Originals_Prophere_SS18_KEY_March-Look06_CQ2542_Foundation_Group_02_low.jpg',initScale+scale);
});



Comments