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>



Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

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