How to create New Year Animation using HTML CSS & JavaScript

Jan 15, 2025 02:33 AM

How to create New Year Animation using HTML CSS & JavaScript

Let’s create a New Year Animation using HTML, CSS, and JavaScript. This project will feature a festive animation with glowing text, fireworks, or countdowns to celebrate the New Year.

We’ll use HTML for the structure, CSS for the styling and animations, and JavaScript to add interactivity, such as dynamic countdowns or animated effects.

Let’s get started on building the New Year Animation! This project is a great way to showcase your creativity and web development skills while celebrating the joy of the New Year. Let’s bring in the celebrations with some amazing animations!

HTML :

This HTML creates a 3D “Happy New Year 2025” animation with rotating numbers and glowing effects. Numbers are styled in a container with CSS variables for smooth transitions, while glowing circles enhance the festive vibe. A clickable <h2> changes styles dynamically via the connected script.js.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./style.css" />
  <title>2025 | Happy New Year Animation Effect</title>
</head>
<body>
  <div class="container">
    <div class="text" style="--j: 0">
      <span style="--i: 0">2</span>
      <span style="--i: 1">3</span>
      <span style="--i: 2">4</span>
      <span style="--i: 3">5</span>
    </div>
    <div class="text" style="--j: 1">
      <span style="--i: 0">0</span>
      <span style="--i: 1">1</span>
      <span style="--i: 2">2</span>
      <span style="--i: 3">3</span>
    </div>
    <div class="text" style="--j: 2">
      <span style="--i: 0">2</span>
      <span style="--i: 1">3</span>
      <span style="--i: 2">4</span>
      <span style="--i: 3">5</span>
    </div>
    <div class="text" style="--j: 3">
      <span style="--i: 0">4</span>
      <span style="--i: 1">3</span>
      <span style="--i: 2">6</span>
      <span style="--i: 3">5</span>
    </div>
  </div>

  <h2>Happy New Year </h2>
  <div class="glowing">
    <span style="--i: 1"></span>
    <span style="--i: 2"></span>
    <span style="--i: 3"></span>
  </div>
  <div class="glowing">
    <span style="--i: 1"></span>
    <span style="--i: 2"></span>
    <span style="--i: 3"></span>
  </div>
  <div class="glowing">
    <span style="--i: 1"></span>
    <span style="--i: 2"></span>
    <span style="--i: 3"></span>
  </div>
  <div class="glowing">
    <span style="--i: 1"></span>
    <span style="--i: 2"></span>
    <span style="--i: 3"></span>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS :

This code creates an interactive 3D animation with glowing rotating text and elements using CSS. It imports the “Oswald” font and sets up a full-page design centered with a dark background. A 3D container holds text blocks with rotating effects, dynamic transitions, and color gradients. The glowing effects are achieved with keyframe animations that apply hue-rotation and smooth transformations to circular spans, generating a pulsating glow. Media queries handle responsive scaling for smaller screens, ensuring a consistent user experience. The visual style blends modern aesthetics with playful animations for an engaging display.

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Oswald", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  background: #3d3d3d;
}

.container {
  position: absolute;
  display: flex;
  transform-style: preserve-3d;
  gap: 10px;
  transform: rotateY(30deg) rotateX(10deg);
}

.container.newyear .text {
  transform: rotateX(calc(-360deg * 1));
}

.container.newyear .text:last-child {
  transform: rotateX(calc(-630deg * 1));
}

.text {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: 2.5s ease-in-out;
  transition-delay: calc(0.25s * var(--j));
}

.text span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 4em;
  cursor: default;
  background: linear-gradient(#434343, #535353);
  transform-style: preserve-3d;
  transform: rotateX(calc(90deg * var(--i))) translateZ(50px);
}

.text::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #373737;
  transform-origin: left;
  transform: rotateY(90deg) translateX(-50px);
}

.text:last-child span {
  background: linear-gradient(#29c040, #32ed4e);
}
.text:last-child span::before {
  background: #11a728;
}
.text:last-child::before {
  background: #11a728;
}

h2 {
  position: fixed;
  bottom: 50px;
  color: #252525;
  font-size: 2em;
  transition: 0.5s;
  cursor: pointer;
}

h2.active {
  color: #fff;
  text-shadow:
    0 0 20px #fff,
    0 0 50px #fff;
}

h2:after {
  content: ' 2025';
  transition: 0.5s;
}

h2.active::after {
  color: #32ed4e;
  text-shadow:
    0 0 20px #32ed4e,
    0 0 50px #32ed4e;
}

.glowing {
  position: relative;
  min-width: 750px;
  height: 750px;
  pointer-events: none;
  margin: -150px;
  transform-origin: right;
  animation: colorChange 5s linear infinite;
}

@keyframes colorChange {
  0% {
    filter: hue-rotate(0deg);
    transform: rotate(0deg);
  }
  0% {
    filter: hue-rotate(360deg);
    transform: rotate(360deg);
  }
}

.glowing:nth-child(even) {
  transform-origin: left;
}

.glowing span {
  position: absolute;
  top: calc(80px * var(--i));
  left: calc(80px * var(--i));
  bottom: calc(80px * var(--i));
  right: calc(80px * var(--i));
  border-radius: 50%;
  box-sizing: border-box;
}

.glowing span::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: -8px;
  width: 15px;
  height: 15px;
  background: #f00;
}

@keyframes animate-reverse {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.glowing span:nth-child(3n + 1) {
  animation: animate 10s alternate infinite;
}
.glowing span:nth-child(3n + 2) {
  animation: animate-reverse 13s alternate infinite;
}
.glowing span:nth-child(3n + 3) {
  animation: animate 8s alternate infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.glowing span:nth-child(3n + 1)::before {
  background: rgba(134, 255, 0, 1);
  box-shadow:
    0 0 20px rgba(134, 255, 0, 1),
    0 0 40px rgba(134, 255, 0, 1),
    0 0 60px rgba(134, 255, 0, 1),
    0 0 80px rgba(134, 255, 0, 1),
    0 0 4px rgba(134, 255, 0, 0.1);
}
.glowing span:nth-child(3n + 2)::before {
  background: rgba(255, 214, 0, 1);
  box-shadow:
    0 0 20px rgba(255, 214, 0, 1),
    0 0 40px rgba(255, 214, 0, 1),
    0 0 60px rgba(255, 214, 0, 1),
    0 0 80px rgba(255, 214, 0, 1),
    0 0 4px rgba(134, 255, 0, 0.1);
}
.glowing span:nth-child(3n + 3)::before {
  background: rgb(0, 226, 255, 1);
  box-shadow:
    0 0 20px rgba(0, 226, 255, 1),
    0 0 40px rgba(0, 226, 255, 1),
    0 0 60px rgba(0, 226, 255, 1),
    0 0 80px rgba(0, 226, 255, 1),
    0 0 4px rgba(0, 226, 255, 0.1);
}

@media only screen and (max-width: 600px) {
  meta[name="viewport"] {
    initial-scale: 0.25;
  }
}

JavaScript:

This JavaScript code makes an interactive feature where clicking the <h2> element toggles visual effects. It selects the <h2> element and a container with the class .container. When <h2> is clicked, it alternates (toggles) the newyear class on the container, which likely changes its style or animation, and toggles the active class on the <h2> itself to modify its appearance (e.g., glowing effect). This enhances user interaction by linking click actions to dynamic style changes.

// Select the 'h2' element
let h2 = document.querySelector('h2');

// Select the element with class 'container'
let container = document.querySelector('.container');

// Toggle the 'newyear' class on the 'container' element 
// and the 'active' class on the 'h2' element when 'h2' is clicked
h2.onclick = function() {
    container.classList.toggle('newyear'); // Toggle the 'newyear' class on the 'container'
    this.classList.toggle('active'); // Toggle the 'active' class on the 'h2' element (the one clicked)
}

In conclusion, creating a New Year Animation using HTML, CSS, and JavaScript has been a fun and creative project. By combining HTML for structure, CSS for styling and festive animations, and JavaScript for dynamic effects, we’ve crafted a lively and interactive way to celebrate the New Year. This project is perfect for learning new techniques while spreading holiday cheer.

If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!