Home >Web Front-end >JS Tutorial >Diwali animation using html ,css and javascript https://www.instagram.com/webstreet_code/

Diwali animation using html ,css and javascript https://www.instagram.com/webstreet_code/

Mary-Kate OlsenOriginal: 2024-11-03 00:41:30426browse

https://www.instagram.com/webstreet_code/

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diwali Diyas Animation</title>
<!-- Importing Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Moon+Dance&display=swap" rel="stylesheet">
<style>
  /* Full-screen setup */
  body {
    margin: 0;
    overflow: hidden;
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative; /* Positioning context for firecrackers */
  }

  .container {
    z-index: 1;
    display: block;
    color: white;
    text-align: center; /* Center align heading */
  }

  .heading {
    z-index: 1;
    margin: 5px;
    padding: 50px;
    font-size: 50px;
    font-family: 'Moon Dance', cursive; /* Apply the Moon Dance font */
    text-shadow: 0 0 20px rgba(255, 255, 0, 1), 0 0 30px rgba(255, 255, 0, 1); /* Yellow glowing effect */
  }

  /* Container for positioning diyas */
  .diya-container {
    display: flex;
    gap: 20px; /* Space between diyas */
    justify-content: center; /* Center diyas in the container */
  }

  /* Diya setup */
  .diya {
    z-index: 1;
    position: relative;
    width: 60px; /* Width of diya */
    height: 30px; /* Height of diya */
    background-color: #8B4513; /* Brown bowl color */
    border-bottom-left-radius: 30px; /* Bowl shape */
    border-bottom-right-radius: 30px; /* Bowl shape */
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.6); /* Glowing effect */
    transition: box-shadow 0.3s ease; /* Smooth transition for glow */
  }

  /* Flame setup */
  .flame {
    position: absolute;
    width: 10px; /* Width of flame */
    height: 20px; /* Height of flame */
    background: radial-gradient(circle, #FFA500, #FF4500); /* Flame gradient */
    border-radius: 50%; /* Flame shape */
    left: 50%; /* Center the flame horizontally */
    transform: translateX(-50%); /* Center the flame */
    top: -15px; /* Position above diya */
    animation: flicker 1s infinite alternate; /* Flickering animation */
  }

  /* Slower flickering flame effect */
  @keyframes flicker {
    0% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(1.05); opacity: 0.9; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
  }

  /* Glowing effect on hover */
  .diya {
    box-shadow: 0 0 30px rgba(255, 165, 0, 1); /* Intensified glow on hover */
  }

  /* Firecracker styles */
  .firecracker {
    z-index: 0.8;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    animation: explode 0.8s forwards;
  }

  @keyframes explode {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(2);
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  /* Burst effect styles */
  .burst {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: burst 1s forwards;
  }

  @keyframes burst {
    0% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
</style>
</head>
<body>

  <div class="container">
    <h1 class="heading">Happy Diwali</h1>

    <!-- Container holding all diyas -->
    <div class="diya-container">
      <div class="diya">
        <div class="flame"></div>
      </div>
      <div class="diya">
        <div class="flame"></div>
      </div>
      <div class="diya">
        <div class="flame"></div>
      </div>
      <div class="diya">
        <div class="flame"></div>
      </div>
      <div class="diya">
        <div class="flame"></div>
      </div>
    </div>
  </div>

  <script>
    // Function to generate random color
    function getRandomColor() {
      const colors = ['red', 'yellow', 'blue', 'green', 'orange', 'purple', 'cyan', 'magenta'];
      return colors[Math.floor(Math.random() * colors.length)];
    }

    // Function to create firecrackers
    function createFirecrackers() {
      const body = document.body;

      for (let i = 0; i < 30; i++) { // 8 firecrackers at a time
        const firecracker = document.createElement('div');
        firecracker.classList.add('firecracker');

        // Random position
        firecracker.style.left = Math.random() * 100 + 'vw';
        firecracker.style.top = Math.random() * 100 + 'vh'; // Random vertical position

        // Set random color
        firecracker.style.backgroundColor = getRandomColor();

        body.appendChild(firecracker);

        // Create bursts after firecracker animation
        setTimeout(() => {
          createBursts(firecracker);
          firecracker.remove(); // Remove firecracker after it explodes
        }, 1000); // Time when firecracker explodes
      }
    }

    function createBursts(firecracker) {
      const body = document.body;
      const positions = [
        { x: -20, y: -20 }, // Top-left
        { x: 20, y: -20 }, // Top-right
        { x: -20, y: 20 }, // Bottom-left
        { x: 20, y: 20 }   // Bottom-right
      ];

      positions.forEach(pos => {
        const burst = document.createElement('div');
        burst.classList.add('burst');
        burst.style.left = firecracker.offsetLeft + 'px'; // Use firecracker's position
        burst.style.top = firecracker.offsetTop + 'px'; // Use firecracker's position
        burst.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
        burst.style.backgroundColor = firecracker.style.backgroundColor; // Same color as firecracker
        body.appendChild(burst);

        // Remove burst after animation completes
        burst.addEventListener('animationend', () => {
          burst.remove();
        });
      });
    }

    // Delay firecracker animation
    setInterval(createFirecrackers, 2000); // Create firecrackers every 2 seconds
  </script>
</body>
</html>

The above is the detailed content of Diwali animation using html ,css and javascript https://www.instagram.com/webstreet_code/. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html using animation https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Can (a == 1 && a == 2 && a == 3) Ever Be True in JavaScript?Next article：Can (a == 1 && a == 2 && a == 3) Ever Be True in JavaScript?

See more

Diwali animation using html ,css and javascript https://www.instagram.com/webstreet_code/

Related articles