📸 ゴリラフェイスチェンジャー 🐵🎉
😀
🎉
🐵
🚀
✨
```html
<!DOCTYPE html>
<html>
<head>
<title>😊🐵 ゴリラ変身アプリ 🐵😊</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.bounce {
animation-name: bounce;
}
.shake {
animation-name: shake;
}
canvas {
border: 2px dashed #f39c12;
border-radius: 10px;
margin-top: 10px;
}
#buttons div {
display: inline-block;
margin: 5px;
font-size: 24px;
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<div style="text-align: center; padding: 10px;">
<h1>📸 ゴリラフェイスチェンジャー 🐵🎉</h1>
<input type="file" id="upload" accept="image/*" style="margin-bottom: 10px;">
<canvas id="canvas" width="400" height="400" style="display: none;"></canvas>
<div id="emoji-overlay" style="position: relative; width: 400px; height: 400px; margin: 0 auto;">
<img id="photo" src="" alt="写真" style="width: 100%; height: 100%; border-radius: 10px;">
<!-- ゴリラ絵文字を重ねる位置は仮 -->
<span style="position: absolute; top: 50px; left: 150px; font-size: 50px;" id="gorilla1">🐵</span>
<span style="position: absolute; top: 200px; left: 100px; font-size: 50px;" id="gorilla2">🐵</span>
</div>
<div id="buttons" style="margin-top: 10px;">
<div class="animated bounce" onclick="addEmoji()">😀</div>
<div class="animated bounce" onclick="addEmoji()">🎉</div>
<div class="animated bounce" onclick="addEmoji()">🐵</div>
<div class="animated bounce" onclick="addEmoji()">🚀</div>
<div class="animated bounce" onclick="addEmoji()">✨</div>
</div>
</div>
<script>
const upload = document.getElementById('upload');
const photo = document.getElementById('photo');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const emojiOverlay = document.getElementById('emoji-overlay');
upload.addEventListener('change', function(e) {
const file = e.target.files[0];
if(!file) return;
const reader = new FileReader();
reader.onload = function(event) {
photo.src = event.target.result;
photo.style.display = 'block';
canvas.style.display = 'none';
}
reader.readAsDataURL(file);
});
function addEmoji() {
const emoji = document.createElement('span');
const emojis = ['🐵', '🎉', '😀', '🚀', '✨'];
emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
emoji.style.position = 'absolute';
emoji.style.top = Math.random() * 350 + 'px';
emoji.style.left = Math.random() * 350 + 'px';
emoji.style.fontSize = '30px';
emoji.classList.add('animated', 'shake');
emoji.addEventListener('animationend', () => {
emoji.classList.remove('shake');
});
emojiOverlay.appendChild(emoji);
setTimeout(() => {
emoji.remove();
}, 3000);
}
</script>
</body>
</html>
```