🎨✨絵画風イラスト変換アプリ🎉🖼️
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
@keyframes pop {
0% { transform: scale(1); opacity: 1;}
100% { transform: scale(1.5); opacity: 0;}
}
@keyframes sparkle {
0%, 100% { opacity: 0; transform: scale(0.5); }
50% { opacity: 1; transform: scale(1.5); }
}
.bouncy {
animation: bounce 2s infinite;
}
.emoji-pop {
animation: pop 0.5s forwards;
}
.sparkle {
animation: sparkle 1s infinite;
position: absolute;
font-size: 16px;
color: gold;
}
</style>
</head>
<body>
<div style="width: 100%; max-width: 400px; max-height: 400px; height: 100vh; margin: auto; border: 5px solid #FFD700; border-radius: 20px; position: relative; box-sizing: border-box; overflow: hidden; background: linear-gradient(135deg, #f8f9fa, #e9ecef);">
<div style="text-align: center; padding: 20px;">
<div style="font-size: 2rem; margin-bottom: 10px;">🎨✨絵画風イラスト変換アプリ🎉🖼️</div>
<input type="file" id="upload" accept="image/*" style="padding: 10px; font-size: 1rem; border: 2px dashed #6c757d; border-radius: 10px; cursor: pointer;">
<canvas id="canvas" style="margin-top: 20px; max-width: 100%; border:2px solid #6c757d; border-radius: 10px; display: none;"></canvas>
</div>
<div id="emojis" style="position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;"></div>
<!-- Sparkle Emojis -->
<span class="sparkle" style="top:10%; left:20%;">✨</span>
<span class="sparkle" style="top:30%; left:80%;">💫</span>
<span class="sparkle" style="top:70%; left:40%;">🌟</span>
<span class="sparkle" style="top:50%; left:60%;">✨</span>
<span class="sparkle" style="top:20%; left:70%;">💥</span>
</div>
<script>
const upload = document.getElementById('upload');
const canvas = document.getElementById('canvas');
const emojisContainer = document.getElementById('emojis');
upload.classList.add('bouncy');
upload.addEventListener('change', function(e){
const file = e.target.files[0];
if(!file) return;
const img = new Image();
const reader = new FileReader();
reader.onload = function(evt){
img.src = evt.target.result;
}
img.onload = function(){
// Resize canvas to fit within 400x400 while maintaining aspect ratio
const maxSize = 300;
let width = img.width;
let height = img.height;
if(width > height){
if(width > maxSize){
height *= maxSize / width;
width = maxSize;
}
} else {
if(height > maxSize){
width *= maxSize / height;
height = maxSize;
}
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// Draw image
ctx.drawImage(img, 0, 0, width, height);
// Apply simplistic painting effect: posterize
let imageData = ctx.getImageData(0,0, width, height);
let data = imageData.data;
for(let i=0; i < data.length; i +=4){
data[i] = Math.round(data[i]/51)*51;
data[i+1] = Math.round(data[i+1]/51)*51;
data[i+2] = Math.round(data[i+2]/51)*51;
}
ctx.putImageData(imageData, 0,0);
canvas.style.display = 'block';
}
reader.readAsDataURL(file);
triggerEmojis();
});
function triggerEmojis(){
for(let i=0; i < 15; i++){
let emoji = document.createElement('span');
const emojis = ['🎉','✨','💖','🌈','🎈','💫','🌟','🎊','🔥','🍀'];
emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
emoji.style.position = 'absolute';
emoji.style.left = Math.random() * 100 + '%';
emoji.style.top = Math.random() * 100 + '%';
emoji.style.fontSize = '24px';
emoji.classList.add('emoji-pop');
emoji.style.pointerEvents = 'none';
emojisContainer.appendChild(emoji);
setTimeout(() => { emoji.remove(); }, 600);
}
}
// Add interactive reactions on canvas click
canvas.addEventListener('click', function(){
for(let i=0; i < 20; i++){
let emoji = document.createElement('span');
const emojis = ['😊','😍','🤩','😁','😜','🤗','😎','🥳','🙌','👏'];
emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
emoji.style.position = 'absolute';
emoji.style.left = Math.random() * 100 + '%';
emoji.style.top = Math.random() * 100 + '%';
emoji.style.fontSize = '20px';
emoji.classList.add('emoji-pop');
emoji.style.pointerEvents = 'none';
emojisContainer.appendChild(emoji);
setTimeout(() => { emoji.remove(); }, 500);
}
});
</script>
</body>
</html>
```