This content originally appeared on DEV Community and was authored by Prince
```<!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: 'line1', text: 'HAPPY' },<br>
{ id: 'line2', text: 'NEW' },<br>
{ id: 'line3', text: 'YEAR' }<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(() => {
firework.remove();
callback(x, y);
}, 1000); // Firework duration
}
function explodeFirework(x, y) {
for (let i = 0; i < 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(() => 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) => {
const container = document.getElementById(line.id);
line.text.split('').forEach((char, i) => {
const x = window.innerWidth / 2 + i * 50 - (line.text.length * 25);
const y = window.innerHeight;
setTimeout(() => {
shootFirework(x, y, () => {
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>
This content originally appeared on DEV Community and was authored by Prince
Prince | Sciencx (2025-01-02T03:34:45+00:00) Happy New Year animation using html css and js. Retrieved from https://www.scien.cx/2025/01/02/happy-new-year-animation-using-html-css-and-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.