var title = '集合体恐怖症 ドラッグ＆ドロップで画像変更可能';
document.title = title;
var src = 'face.jpg';

function setImg(x,y){
  var name = 'name';
  var t = Math.floor(Math.random()*400)+400;
  var size = Math.floor(Math.random()*80)+40;
  let $img = $('<img>', {src:src,class:'fade'}).css({
    position:'absolute',
    top:y-size/2,
    left:x-size/2,
    width:size,
    height:size,
    animationDuration: t+'ms'
  })
  $('#demo').append($img);
}
function setStyle(text){
  var text = text || `

html,body{
  overflow:hidden;
}
.fade{
  user-select:none;
  border-radius: 50% 50%;
  transform-origin: center;
  animation-name: fadeInAnime;
  animation-fill-mode:backwards;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-timing-function:ease;
  animation-delay: 0s;
  animation-direction:alternate;
}
@keyframes fadeInAnime{
  0% {
    transform:scale(0.1,0.1);
  }
  80% {
    transform:scale(0.7,0.7);
  }

  100% {
    transform:scale(1,1);
  }
}
  `;

  let $style = $('<style>').text(text);
  $('#demo').append($style);
}


function setBack(){
  $('#demo').empty();
  setStyle();
  for(var i=0;i<1200;i++){
    var t = Math.floor(Math.random()*400);
    setTimeout(function(){
      var x = Math.floor(Math.random()*window.innerWidth)+5;
      var y = Math.floor(Math.random()*window.innerHeight)+5;
      setImg(x,y);
    }, t)
  }
}

$(function(){
  $(document).on('click', function(e){
  	let x = e.pageX ;
  	let y = e.pageY ;
    setImg(x,y)
  });

  setBack();
})

/*

#demo{
  user-select:none;
  background-image:url(face.png), url(face.png);
  background-origin:repeat,repeat;
  background-position: -20px, 0px;
  background-size:40px, 12px;
}
*/

var dragArea = document.getElementById('demo');
var fileName = 'face.png';

dragArea.addEventListener('dragstart', function(event){
  event.dataTranfer.addElement(container);
});
dragArea.addEventListener('dragover', function(event){
  event.preventDefault();
});
dragArea.addEventListener('dragleave', function(event){
  event.preventDefault();
});

dragArea.addEventListener('drop', function(event){
  event.preventDefault();
  console.log(event.dataTransfer.files);
  if(!event.dataTransfer.files.length){
    return;
  }
  var file = event.dataTransfer.files[0];
  fileName = file.name.substring(0,12).split('.')[0] || 'name';
  console.log(file);

  var reader = new FileReader();
  reader.readAsDataURL(file)

  reader.addEventListener('load', function(){
    var dataURL = reader.result;
    console.log(dataURL);

    var newImage = new Image();
    newImage.src = dataURL;
    newImage.onload = function(){
      src = newImage.src;
      setBack();
      //insertCanvas(dataURL, this);
    }

  });
});

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-neta/js-trypophobia/