👻 Scary Ghost Cursor with Smoke Trail! 💀 code using html5,css3 and javascript

#webdev #javascript #programming #beginners

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scary Ghost Cursor with Smoke</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      overflow: hidden;
      background: #000; /* Black background for spooky effect */
      cursor: none; /* Hide default cursor */
    }

    .ghost-face {
      position: fixed;
      width: 100px;
      height: 100px;
      pointer-events: none; /* Prevent interference with clicks */
      z-index: 1000;
      transform: translate(-50%, -50%);
    }

    .face {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2); /* Smoke-colored face */
      filter: blur(5px);
    }

    .eyes {
      position: absolute;
      top: 30%;
      left: 50%;
      width: 50%;
      height: 50%;
      display: flex;
      justify-content: space-between;
      transform: translateX(-50%);
    }

    .eye {
      width: 15px;
      height: 15px;
      background: black; /* Eyes are black */
      border-radius: 50%;
    }

    .mouth {
      position: absolute;
      bottom: 20%;
      left: 50%;
      width: 30px;
      height: 10px;
      background: black; /* Mouth is black */
      border-radius: 50%;
      transform: translateX(-50%);
    }

    .smoke-trail {
      position: absolute;
      width: 70px;
      height: 70px;
      background: rgba(255, 255, 255, 0.1); /* Smoke effect */
      border-radius: 50%;
      filter: blur(15px);
      animation: fadeOut 2s forwards;
    }

    @keyframes fadeOut {
      0% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(2);
      }
    }
  </style>
</head>
<body>
  <div class="ghost-face" id="ghost-face">
    <div class="face">
      <div class="eyes">
        <div class="eye"></div>
        <div class="eye"></div>
      </div>
      <div class="mouth"></div>
    </div>
  </div>

  <script>
    const ghostFace = document.getElementById("ghost-face");

    // Move the ghost face to follow the cursor
    document.addEventListener("mousemove", (e) => {
      ghostFace.style.left = `${e.pageX}px`;
      ghostFace.style.top = `${e.pageY}px`;
      createSmokeTrail(e.pageX, e.pageY);
    });

    // Create the smoke trail effect
    function createSmokeTrail(x, y) {
      const smoke = document.createElement("div");
      smoke.className = "smoke-trail";
      smoke.style.left = `${x}px`;
      smoke.style.top = `${y}px`;
      document.body.appendChild(smoke);

      // Remove the smoke element after the animation ends
      setTimeout(() => {
        smoke.remove();
      }, 2000); // Matches the animation duration
    }
  </script>
</body>
</html>

-

DEV Community

👻 Scary Ghost Cursor with Smoke Trail! 💀 code using html5,css3 and javascript

Top comments (0)

Read next

Build a Simple Chatbot with Svelte and ElizaBot

EchoAPI Tutorial: How to Use Scripts in EchoAPI

What is Node JS?

How to solve Data Synchronization in Next.js