view source

JavaScript

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);
    }

  });
});

CSS

HTML

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

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

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。