In this article, we will show you how you can animate the New Year with the help of HTML, CSS and JavaScript. So, Lets get started.
Why Choose HTML, CSS and JavaScript for Animations?
HTML, CSS, and JavaScript are the core building blocks of web development. They allow for a seamless integration of animations that are visually appealing yet lightweight. Using these technologies, you can create animations that run smoothly on both desktops and mobile devices. The best part is, you don’t need advanced skills to start creating something beautiful. HTML provides the structure, CSS adds style, and JavaScript brings interactivity to life.
1. HTML to Structure Your Animation
HTML serves as the foundation of your animation. You’ll create the elements that will be animated, such as the , fireworks, or celebratory text. With a few simple HTML tags like (<div>) you can build a skeleton of your animation, ready to be styled and animated.
Creating a new file called (index.html). Then, copy and paste the HTML code provided into this file. Remember to save it with the (.html) extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Countdown</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="countdown-container">
<div id="countdown"></div>
<div id="message" class="hidden">Happy New Year!</div>
</div>
<div id="confetti"></div>
<script src="script.js"></script>
</body>
</html>
2. Styling the Animation with CSS
To put it rather simply, let’s take a look at the Animation display! Now, Animation display can be visualized through animations created with the help of HTML elements using CSS! You can also set a gradient in CSS to mimic the background of the sky during the Animation show, or even animate Animation going off by making use of CSS keyframes on elements. Now that is creativity!
Creating a new file called (style.css). Then, copy and paste the HTML code provided into this file. Remember to save it with the (.css) extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1a1a1a;
font-family: 'Arial', sans-serif;
}
.countdown-container {
text-align: center;
color: white;
font-size: 3em;
font-weight: bold;
}
.hidden {
display: none;
}
#confetti {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.confetti-piece {
position: absolute;
width: 10px;
height: 10px;
background-color: random;
animation: fall 3s linear infinite;
}
@keyframes fall {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(100vh);
}
}
3. Adding Interactivity with JavaScript
Javascript is the key to enlivening your new year’s graphic. Be it fireworks exploding at the height of the countdown or even the countdown itself, whatever it maybe, interactiveness is a characteristic that Javascript brings to the table. What’s more is that javaScript can turn ordinary tasks into enthralling visuals. Picture this: a user clicking a button or hovering over an element and an event listener being triggered which in turn plays an animation. Sounds simple, doesn’t it?
Creating a new file called (script.js). Then, copy and paste the HTML code provided into this file. Remember to save it with the (.js) extension.
// Countdown Timer
function startCountdown() {
const countdownElement = document.getElementById("countdown");
const messageElement = document.getElementById("message");
const newYearDate = new Date("January 1, 2025 00:00:00").getTime();
const interval = setInterval(function() {
const now = new Date().getTime();
const distance = newYearDate - now;
// Calculate days, hours, minutes, and seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
countdownElement.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
// If countdown finishes, show the message and trigger confetti
if (distance < 0) {
clearInterval(interval);
countdownElement.style.display = "none";
messageElement.style.display = "block";
triggerConfetti();
}
}, 1000);
}
// Trigger Confetti Animation
function triggerConfetti() {
const confettiContainer = document.getElementById("confetti");
for (let i = 0; i < 200; i++) {
const confettiPiece = document.createElement("div");
confettiPiece.classList.add("confetti-piece");
confettiPiece.style.backgroundColor = getRandomColor();
confettiPiece.style.left = `${Math.random() * 100}%`;
confettiPiece.style.animationDuration = `${Math.random() * 2 + 3}s`;
confettiContainer.appendChild(confettiPiece);
}
}
// Get random color for confetti pieces
function getRandomColor() {
const colors = ['#FF5733', '#33FF57', '#3357FF', '#FFD700', '#FF1493'];
return colors[Math.floor(Math.random() * colors.length)];
}
// Start the countdown when the page loads
startCountdown();
Conclusion
It is exciting and fascinating to develop a New Year animation using HTML, CSS and JavaScript and it enhances the celebratory mood of the site. For instance, you can accompany a count down clock with an animated New Year message or an animated fireworks show after this countdown with the help of these tools. Next New Year, by caring to plan the right selection of effects and these web technologies, together you can create a remarkable experience for your site browsers.
Happy Coding!
