Cursor Animation Effects | On Mousemove, Mouseout & Mouse Stopped - HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you are going to learn how to create an animated cursor for a website using HTML, CSS, and Javascript on mouse move, mouse out, and mouse stopped. On the mouse move event, the cursor animation element will follow the cursor pointer everywhere it moves on the page. On the mouse out event, when the mouse pointer is out from the page the cursor animation will hide from the page. And also on the mouse stopped function, when the mouse pointer stopped on the page the cursor will hide from the page. Let's see how to create this animated cursor effect.

First, create the index.html file and style.css file. After you created those files then start the HTML part of the cursor element in the index.html file. When the HTML part is complete, to start the styling part with the cursor element animation link the style.css file to the index.html file in between <head></head> tags. Then go to the style.css file and do the styling part of the cursor element animation as you can see in the video. After the styling part complete then go to the index.html file for the javascript part. In the index.html file before the body close tag open <script></script> tags and complete the javascript part inside that tags as you can see in the video. So that's all. Hope this video will be helpful to create awesome cursor effects on a website.

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cursor Animation | On Mousemove, Mouseout, MouseStopped</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

<section class="main">
      <h1>Cursor Animation</h1>
    </section>

//follow cursor on mousemove
    document.addEventListener("mousemove", (e) => {
      let x = e.pageX;
      let y = e.pageY;

cursor.style.top = y + "px";
      cursor.style.left = x + "px";
      cursor.style.display = "block";

//cursor effects when mouse stopped
      function mouseStopped(){
        cursor.style.display = "none";
      }
      clearTimeout(timeout);
      timeout = setTimeout(mouseStopped, 1000);
    });

//cursor effects when mouseout
    document.addEventListener("mouseout", () => {
      cursor.style.display = "none";
    });
    </script>

</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

body{
  height: 100vh;
  background: #000115;
  cursor: none;
}

.main{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main h1{
  color: rgba(255, 255, 255, 0.8);
  font-size: 65px;
}

.cursor{
  z-index: 999;
  position: fixed;
  background: #2696E8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 20px #2696E8,
              0 0 60px #2696E8,
              0 0 100px #2696E8;
  animation: colors 5s infinite;
  transform: translate(-50%, -50%);
  display: none;
}

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

.cursor:before{
  content: '';
  position: absolute;
  background: #2696E8;
  width: 50px;
  height: 50px;
  opacity: 0.2;
  transform: translate(-30%, -30%);
  border-radius: 50%;
}

Download File Setup

If the download didn't start automatically, click here.

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

UnknownJanuary 23, 2021 at 5:55 AM
Thanks a lot for this vedio. You are doing great job. Keep it up ❤️❤️
sunlight moviesFebruary 21, 2021 at 3:25 AM
thank you so much
AnonymousMay 21, 2022 at 2:54 AM
thx sir, you help me a lot I am developing my website as a college project
you give me a new idea
AnonymousMay 30, 2022 at 11:01 PM
NICE ONE [CODING SNOW] KEEP IT UP
AnonymousJune 11, 2022 at 7:05 AM
I used the cursor for my website and it made the site cool
AnonymousJune 11, 2022 at 7:05 AM
You are very creative
AnonymousJune 11, 2022 at 7:08 AM
Everything post is 100000000000000000000000000000000IQ I appreciate your protects and you 👍🤝 You are a Website champion ❤️
AnonymousJanuary 17, 2023 at 2:17 AM
Appreciate the tutorial man. Only one more question. If I want to do the animation in a specific area how do I do that. So when you hover over a box you get the animation but when you hover over a different box on the same page you get no or a different animation.

Friday, January 22, 2021

Cursor Animation Effects | On Mousemove, Mouseout & Mouse Stopped - HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Friday, January 22, 2021

Cursor Animation Effects | On Mousemove, Mouseout & Mouse Stopped - HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form