Create a Janmashtami Dahi Handi Animation using HTML, CSS, and JavaScript

Join us in celebrating Janmashtami, the joyous festival that marks the birth of Lord Krishna! This video captures the vibrant festivities, devotional songs, and traditional rituals associated with this auspicious day. Whether you’re participating in the lively Dahi Handi event, enjoying a spiritual Bhajan session, or simply reflecting on Lord Krishna’s teachings, Janmashtami is a time for joy, love, and devotion. Let’s come together to honor and celebrate the divine presence of Lord Krishna. Wishing you all a very Happy Janmashtami!

HTML:

Create an HTML file and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Janmashtami Dahi Handi Animation</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="pot-piece piece1"></div>
      <div class="pot-piece piece2"></div>
      <div class="pot-piece piece3"></div>
      <div class="pot-piece piece4"></div>
      <div class="pot-piece piece5"></div>
      <div class="pot-piece piece6"></div>
      <div class="pot-piece piece7"></div>
      <div class="pot-piece piece8"></div>
      <div class="pot-piece piece9"></div>
      <div class="pot-piece piece10"></div>

      <img src="https://codewithubes.in/wp-content/uploads/2024/08/handi.png" alt="Handi" class="handi" id="handi" />

      <div id="cursor-area" class="cursor-area"></div>

      <img src="https://codewithubes.in/wp-content/uploads/2024/08/broken_handi.png" alt="Broken Handi" class="broken-handi" id="brokenHandi"/>

      <div class="curd">
        <div class="curd-drop"></div>
        <div class="curd-drop"></div>
        <div class="curd-drop"></div>
        <div class="curd-drop"></div>
      </div>
      <div class="happy-janmashtami" id="janmashtamiText">
        Happy Janmashtami!
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS:

Create a CSS file and add the following code:

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
}

.container {
  position: relative;
  width: 200px;
  height: 100vh;
}

.handi {
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.handi:hover {
  transform: translateX(-50%) scale(1.05);
}

.cursor-area {
  position: absolute;
  width: 76px;
  height: 70px;
  top: 111px;
  left: 96px;
  cursor: url(https://codewithubes.in/wp-content/uploads/2024/08/coconut.png), auto;
  background-color: transparent;
}

.broken-handi {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%) translateY(200px);
  opacity: 0;
  z-index: 5;
}

.handi-break {
  animation: breakHandi 0.6s forwards ease-in-out;
}

.show-broken-handi {
  animation: showBrokenHandi 2.5s forwards ease-in-out;
}

@keyframes breakHandi {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-20px) rotate(10deg);
  }
  100% {
    transform: translateX(-50%) translateY(100px) rotate(-45deg);
    opacity: 0;
  }
}

@keyframes showBrokenHandi {
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.pot-piece {
  position: absolute;
  width: 40px;
  height: 50px;
  background-color: #bd3a1e;
  border: 2px solid #bd3a1e;
  transform-style: preserve-3d;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
}

.piecefall {
  animation: piecefall 3s forwards;
  animation-delay: var(--delay);
}

@keyframes piecefall {
  0% {
    transform: translateY(-150%) rotate(var(--rotate));
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: translateY(100vh) rotate(var(--rotate-end));
    opacity: 0;
  }
}

.piece1 {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  --delay: 0.1s;
  --rotate: 0deg;
  --rotate-end: 90deg;
  left: 10%;
}
.piece2 {
  clip-path: polygon(50% 0%, 80% 20%, 60% 100%, 0% 50%);
  --delay: 0.15s;
  --rotate: 15deg;
  --rotate-end: 180deg;
  left: 25%;
}
.piece3 {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%);
  --delay: 0.2s;
  --rotate: -20deg;
  --rotate-end: 270deg;
  left: 40%;
}
.piece4 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%);
  --delay: 0.25s;
  --rotate: 30deg;
  --rotate-end: 360deg;
  left: 55%;
}
.piece5 {
  clip-path: polygon(20% 0%, 100% 20%, 80% 100%, 0% 80%);
  --delay: 0.3s;
  --rotate: -45deg;
  --rotate-end: 450deg;
  left: 70%;
}
.piece6 {
  clip-path: polygon(40% 0%, 100% 20%, 80% 100%, 0% 80%);
  --delay: 0.35s;
  --rotate: 60deg;
  --rotate-end: 540deg;
  left: 80%;
}
.piece7 {
  clip-path: polygon(20% 0%, 100% 50%, 80% 100%, 0% 50%);
  --delay: 0.4s;
  --rotate: -90deg;
  --rotate-end: 630deg;
  left: 20%;
}
.piece8 {
  clip-path: polygon(30% 0%, 100% 50%, 50% 100%, 0% 80%);
  --delay: 0.45s;
  --rotate: 120deg;
  --rotate-end: 720deg;
  left: 35%;
}
.piece9 {
  clip-path: polygon(50% 0%, 100% 50%, 80% 100%, 0% 50%);
  --delay: 0.5s;
  --rotate: -150deg;
  --rotate-end: 810deg;
  top: 10%;
  left: 50%;
}
.piece10 {
  clip-path: polygon(0 0, 100% 20%, 50% 100%, 0% 50%);
  --delay: 0.55s;
  --rotate: 180deg;
  --rotate-end: 900deg;
  top: 20%;
  left: 35%;
}

.curd {
  background: transparent;
  width: 110%;
  height: 20%;
  position: absolute;
  bottom: 0;
}

.curd-drop {
  background: #f4e9d8;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  bottom: 500%;
  border-radius: 0 50% 50%;
  transform: translateX(-50%) rotate(45deg);
}
.curd-drop:nth-child(1) {
  width: 50px;
  height: 50px;
  -webkit-animation-delay: 0.1875s;
  animation-delay: 0.1875s;
}
.curd-drop:nth-child(2) {
  width: 35px;
  height: 35px;
  -webkit-animation-delay: 0.375s;
  animation-delay: 0.375s;
}
.curd-drop:nth-child(3) {
  width: 25px;
  height: 25px;
  -webkit-animation-delay: 0.5625s;
  animation-delay: 0.5625s;
}
.curd-drop:nth-child(4) {
  width: 15px;
  height: 15px;
  -webkit-animation-delay: 0.65s;
  animation-delay: 0.65s;
}

.curdfall {
  -webkit-animation: curdfall 2s ease-in;
  animation: curdfall 2s ease-in;
}

@-webkit-keyframes curdfall {
  0% {
    bottom: 500%;
  }
  50% {
    bottom: -100px;
  }
  100% {
    bottom: -200px;
  }
}

@keyframes curdfall {
  0% {
    bottom: 500%;
  }
  50% {
    bottom: -100px;
  }
  100% {
    bottom: -200px;
  }
}

.happy-janmashtami {
  position: absolute;
  width: max-content;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2em;
  font-family: 'Arial', sans-serif;
  opacity: 0;
  z-index: 10;
}

.textAnimate {
  animation: fadeInText 2s forwards;
  animation-delay: 1.5s;
}

@keyframes fadeInText {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 10px #ff9933, 0 0 20px #ff9933, 0 0 30px #ff9933;
  }
}

JavaScript:

Create a JavaScript file and add the following code:

const handi = document.getElementById('handi');
const brokenHandi = document.getElementById('brokenHandi');
const potPieces = document.querySelectorAll('.pot-piece');
const curdDrops = document.querySelectorAll('.curd-drop');
const janmashtamiText = document.getElementById('janmashtamiText');
const cursorArea = document.getElementById('cursor-area');

cursorArea.addEventListener('click', breakHandi);

function breakHandi() {
  handi.classList.add('handi-break');
  brokenHandi.classList.add('show-broken-handi');
  potPieces.forEach((piece) => piece.classList.add('piecefall'));
  curdDrops.forEach((drop) => drop.classList.add('curdfall'));
  setTimeout(function () {
    cursorArea.style.display = 'none';
  }, 1000);

  janmashtamiText.classList.add('textAnimate');
}

Output:

Happy coding!

Create a Janmashtami Dahi Handi Animation using HTML, CSS, and JavaScript

HTML:

CSS:

JavaScript:

Output:

Comments

Leave a Reply Cancel reply