🎉 Fun Project: Dancing Emoji Party

Bring life to your web page with this fun, animated dancing emoji effect. Pure HTML + CSS + JS = joy!

<div id="party-zone"></div>

<style>
body {
  background: #111;
  margin: 0;
  overflow: hidden;
}

#party-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.emoji {
  position: absolute;
  font-size: 2rem;
  animation: float 5s linear infinite;
  user-select: none;
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-10vh) rotate(720deg);
    opacity: 0;
  }
}
</style>

<script>
const zone = document.getElementById("party-zone");
const emojis = ["🎉", "🔥", "✨", "💻", "🧠", "🎵", "🚀", "👾"];

function spawnEmoji() {
  const emoji = document.createElement("div");
  emoji.classList.add("emoji");
  emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
  emoji.style.left = Math.random() * 100 + "vw";
  emoji.style.fontSize = Math.random() * 2 + 1 + "rem";
  emoji.style.animationDuration = Math.random() * 3 + 3 + "s";
  zone.appendChild(emoji);

  setTimeout(() => emoji.remove(), 6000);
}

setInterval(spawnEmoji, 200);
</script>

🎊 Use this for celebrations, easter eggs, or just to surprise your visitors with some fun!

More creative web ideas at 👉 @Html_codee

#fun #javascript #frontend #animation #html #css #codeparty