<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buon 4° Anniversario!</title>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/confetti.browser.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
.container {
text-align: center;
z-index: 10;
}
h1 {
font-size: 4rem;
text-shadow: 0 0 20px #ff0055, 0 0 30px #ff0055;
animation: popIn 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
@keyframes popIn {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
p {
font-size: 1.5rem;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="container">
<h1>Buon IV° Anniversario! 🤍 </h1>
<h1>恕</h1>
</div>
<script>
// Funzione per i fuochi d'artificio
const duration = 15 * 1000;
const animationEnd = Date.now() + duration;
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
const interval = setInterval(function() {
const timeLeft = animationEnd - Date.now();
if (timeLeft <= 0) {
return clearInterval(interval);
}
const particleCount = 50 * (timeLeft / duration);
// Fuochi a sinistra e a destra
confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
}, 250);
// Esplosione iniziale massiccia
confetti({
particleCount: 150,
spread: 70,
origin: { y: 0.6 }
});
</script>
</body>
</html>