Skip to main content

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;

  1. HTML File: The file for which the front of the page is designed.
  2. CSS File: The file where the page style is designed.
  3. 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";
}

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

Comments

Popular posts from this blog

Ultrasonic Sensor HC-SR04 With PIC Microcontroller

How Ultrasonic Sensor Works An ultrasonic sensor is a very useful sensor that measures distances with sounds. We used the PIC16F628A microcontroller for this project. This microcontroller has TMR1 which we are going to use. We need 2 I/O pins for TRIG and ECHO pins. For showing distance, we used an LCD. For more information about the LCD library and usage click the button below. LCD Interfacing with PIC Using XC8

How to Make Blink LED with PIC16F628A

How to Make Blink LED With PIC16F628A In this project tutorial, we are going to make blink-led projects with a pic microcontroller. After you read this tutorial you can build a PIC microcontroller project with XC8 on MPLAB IDE. We are going to make 3 different blinking projects. These projects are basic. Just learn how to make a basic project with a PIC microcontroller. You can see below which projects we are going to make; Blinking LED with 1s delay, LED with button, Blinking LED with a button.

DC Motor Speed Control With PIC16F628A

DC Motor Speed Control Simulation In this project, we will control the speed and direction of a DC motor using the PIC16F628A microcontroller. We will write the software in MPLAB IDE with the XC8 language that will send a PWM signal to L293D to control the motor. Finally, we will simulate it through the Proteus software. PWM (Pulse Width Modulation) You can get more information about the PWM signal from the link above. Now let’s examine the L293D motor driver.