クリックした配置画像を爆発させてみました。
ルート階層の中に・・・
picフォルダー（image.png）
という構造です。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Image Explosion</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ffd700;
overflow: hidden;
margin: 0;
}
.image-container {
position: relative;
display: inline-block;
}
img {
width: 400px; /* オリジナルの画像サイズ */
height: auto;
cursor: pointer;
}
.fragment {
position: absolute;
width: 50px;
height: 50px;
overflow: hidden;
}
.fragment img {
position: absolute;
width: 400px;
height: auto;
}
</style>
</head>
<body>
<div class="image-container">
<img id="image" src="pic/image.png" alt="Image">
</div>
<script>
//画像をクリックでclickを実行
document.getElementById('image').
addEventListener('click', function() {
const image = this;
const container = image.parentElement;
const imageWidth = image.clientWidth;
const imageHeight = image.clientHeight;
const fragmentSize = 50;
// クリックした画像を非表示
image.style.visibility = 'hidden';
// 小さな断片（fragment）を作成
// 断片はオリジナルの画像の一部を切り取ったもの
for (let y = 0; y < imageHeight; y += fragmentSize) {
for (let x = 0; x < imageWidth; x += fragmentSize) {
const fragment = document.createElement('div');
fragment.classList.add('fragment');
fragment.style.width = `${fragmentSize}px`;
fragment.style.height = `${fragmentSize}px`;
fragment.style.left = `${x}px`;
fragment.style.top = `${y}px`;
const fragmentImg = document.createElement('img');
fragmentImg.src = image.src;
fragmentImg.style.left = `-${x}px`;
fragmentImg.style.top = `-${y}px`;
fragment.appendChild(fragmentImg);
container.appendChild(fragment);
// 小さな断片（fragment）のアニメーション設定
// 各断片はランダムな方向に移動・回転してフェードアウト
setTimeout(() => {
fragment.style.transition =
'transform 1s ease-out, opacity 1s ease-out';
fragment.style.transform =
`translate(${(Math.random() - 0.5) * 400}px,
${(Math.random() - 0.5) * 400}px) scale(0.5)`;
fragment.style.opacity = '0';
}, 100);
}
}
// アニメーション終了後、断片は完全削除
setTimeout(() => {
container.innerHTML = '';
}, 1500);
});
</script>
</body>
</html>
<!-- index.html -->
実際にクリック〜爆発の流れ
