DEV Community

0 seconds of 18 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:18
 
Prince
Prince

Posted on

6

Happy New Year animation using html css and js


```<!DOCTYPE html>




Happy New Year Animation

<br> /* General Body Styling */<br> body {<br> overflow: hidden;<br> margin: 0;<br> background: black;<br> }</p> <div class="highlight"><pre class="highlight plaintext"><code>/* Text Container */ .line { display: flex; justify-content: center; align-items: center; margin: 10px; position: relative; z-index: 10; } /* Character Animation */ .char { display: inline-block; font-size: 4rem; font-weight: bold; margin: 5px; opacity: 0; transform: translateY(50px) scale(0.5); animation: appear 1s forwards, glow 1.5s infinite alternate; } @keyframes appear { from { opacity: 0; transform: translateY(50px) scale(0.5); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes glow { from { text-shadow: 0 0 10px #fff, 0 0 20px #ff007f, 0 0 30px #7b2cbf; } to { text-shadow: 0 0 20px #fff, 0 0 40px #00b4d8, 0 0 50px #ffcc00; } } /* Upward Firecracker Effect */ .firework { position: absolute; width: 4px; height: 4px; background: hsl(0, 100%, 50%); border-radius: 50%; box-shadow: 0 0 10px hsl(0, 100%, 50%); animation: shoot 1s ease-out forwards; } @keyframes shoot { 0% { transform: translateY(0) scale(0.5); opacity: 1; } 100% { transform: translateY(-300px) scale(1.5); opacity: 0; } } /* Explosion Effect */ .spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: hsl(0, 100%, 50%); box-shadow: 0 0 10px hsl(0, 100%, 50%); animation: explode 1.2s ease-out forwards; } @keyframes explode { 0% { transform: translateY(0) translateX(0) scale(0.5); opacity: 1; } 100% { transform: translateY(calc(-50px + (100px * var(--y-dir)))) translateX(calc(-50px + (100px * var(--x-dir)))) scale(1.5); opacity: 0; } } </code></pre></div> <p>

<!-- Text Lines -->



<!-- Fireworks Container -->

<br> // Characters with Delays<br> const lines = [<br> { id: &#39;line1&#39;, text: &#39;HAPPY&#39; },<br> { id: &#39;line2&#39;, text: &#39;NEW&#39; },<br> { id: &#39;line3&#39;, text: &#39;YEAR&#39; }<br> ];</p> <div class="highlight"><pre class="highlight plaintext"><code>let delay = 0; function shootFirework(x, y, callback) { const firework = document.createElement('div'); firework.className = 'firework'; firework.style.left = `${x}px`; firework.style.top = `${y}px`; firework.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`; firework.style.boxShadow = `0 0 10px hsl(${Math.random() * 360}, 100%, 50%)`; document.body.appendChild(firework); setTimeout(() =&gt; { firework.remove(); callback(x, y); }, 1000); // Firework duration } function explodeFirework(x, y) { for (let i = 0; i &lt; 15; i++) { const spark = document.createElement('div'); spark.className = 'spark'; spark.style.left = `${x}px`; spark.style.top = `${y - 300}px`; spark.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`; spark.style.boxShadow = `0 0 10px hsl(${Math.random() * 360}, 100%, 50%)`; spark.style.setProperty('--x-dir', Math.random()); spark.style.setProperty('--y-dir', Math.random()); document.body.appendChild(spark); setTimeout(() =&gt; spark.remove(), 1200); // Spark duration } } function revealCharacter(char, container, delay) { const span = document.createElement('span'); span.className = 'char'; span.textContent = char; span.style.animationDelay = `${delay}s`; span.style.color = `hsl(${Math.random() * 360}, 100%, 70%)`; container.appendChild(span); } lines.forEach((line, index) =&gt; { const container = document.getElementById(line.id); line.text.split('').forEach((char, i) =&gt; { const x = window.innerWidth / 2 + i * 50 - (line.text.length * 25); const y = window.innerHeight; setTimeout(() =&gt; { shootFirework(x, y, () =&gt; { explodeFirework(x, y); revealCharacter(char, container, 0); }); }, delay * 1000); delay += 1; // Delay between each character firework }); delay += 1; // Extra delay between lines }); </code></pre></div> <p>



Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay