















































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































view source
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 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
1
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-neta/js-trypophobia/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。