Mouse Follower Project With Javascript

Javascript mouse follower. — Javascript Mouse Follower

In this project, we will change the position of an object according to the mouse cursor with Javascript. We can say mouse follower for this project. We will create 3 files for this project. These are;

HTML File: The file for which the front of the page is designed.
CSS File: The file where the page style is designed.
JS File: The file containing the Javascript code.

HTML is a scripting language for creating web pages. It consists of structures called a tag. Most tags must close. For example, the title tag; was opened with <title> and closed with </title> There are three fundamental tags in HTML. These are HTML, head, and body. The HTML tag includes all, the head tag contains information about our page, and the body tag contains everything we want to show the user. <! DOCTYPE html> specifies the HTML version. If you want to write programs with Javascript you need to know the basic information about HTML. You can do some research on the internet.

We added the onmousemove parameter to the HTML tag. This allows the pos(event) function to call when there is a mouse movement. If we don’t have to do this in HTML, then we can do it with javascript codes.

In the head tag, we’ve linked script.js and style.css files. We also identified two div tags within the body tag. The first is a tag with the id 'position'. The mouse position data will display here. The second is a tag we created for our object with an 'circle' id.

index.html File

<!DOCTYPE html>
<html onmousemove="pos(event)">
  <head>
    <title>Mouse Follover</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="position"></div>
    <div id="circle"></div>
  </body>
</html>

Let’s examine the style.css file where we set the properties of our object. Here we have made the absolute position of the tag with the circle id. Thus, the position of the object will arrange according to the page. By making the diameter 50px and the border-radius 50%, we made the object circular. So, we assigned a color to our object.

style.css File

#circle {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #4957b8;
}

Now let’s go to the Javascript section. We can write Javascript code in HTML or we can write code in another file and specify the source as HTML src as we do. I want to write the code to a different file so that the code is more understandable.

The pos() the function will be called when the mouse cursor moves. In this function, we first assign the position of the mouse cursor to the variables x and y and print it on the screen. To keep the mouse cursor in the middle of the object, we take the width and height of the object. We adjust the position of the last object to match the position of the mouse.

script.js File

function pos(e) {
  // Get x and y positions
  let x = e.clientX;
  let y = e.clientY;
  let position = "X: " + x + " Y: " + y;
  let element = document.querySelector('#circle');
  let compStyle = window.getComputedStyle(element);
  // Get height and width of circle  to center it
  let h = compStyle.getPropertyValue('height');
  let w = compStyle.getPropertyValue('width');
  // Write positions to screen
  document.getElementById("position").innerHTML = position;
  // Set top and left positions of circle
  element.style.top = (y - parseInt(h)/2) + "px";
  element.style.left = (x - parseInt(w)/2) + "px";
}

Live Demo

GitHub Repository

As a result, we made a mouse follower with Javascript. We hope this project will be useful, stay healthy.

Trion Projects

Search This Blog