Hi everyone. Welcome to today’s tutorial. Interest tutorial we will learn how to create a Santa that follows the mouse cursor. To create this tutorial, we need HTML, CSS and JavaScript. Along with that, we need images. I have provided the images with source code which you can download at the end of this post.
If you are interested to learn JavaScript with more such projects, you can check out this playlist here. This playlist consists of more than 100+ tutorials. The difficulty level of this project varies from easy to quite complex. Hence this playlist is suitable for all kinds of JavaScript learners including JavaScript beginners to JavaScript experts.
Video Tutorial:
If you are interested to learn through video tutorials instead of reading this blog post, you can check out the video down below also subscribe to my YouTube channel, where I post new tutorial, tips and tricks every alternate day.
Project Folder Structure:
Before we start coding, we create the project folder structure. Create a project folder called Santa follows the mouse. Within this folder, we have five files. These files are index.html, style.css, script.js, and two image files.
HTML:
We start with the HTML file. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Santa Follows Mouse</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="my-div">
<img src="santa-img.png" />
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we add a background image to the body and position the Santa image using CSS. For this copy, the code provided to you below and paste it into your style sheet.
body {
padding: 0;
margin: 0;
background: url("bg-img.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
#my-div {
height: 100px;
width: 100px;
position: absolute;
transition: 0.2s ease-out;
}
#my-div img {
width: 140px;
filter: drop-shadow(0 0 20px rgb(1, 1, 42, 0.2));
}
Javascript:
Lastly, we implement the logic using JavaScript to this end with the following steps:
Create initial references
Detect Us device
Try and catch to avoid any errors in touch screens
Add event listeners on Mouse move
Add event listeners ontouchmove
let myDiv = document.getElementById("my-div");
//Detect touch device
function isTouchDevice() {
//We try to ccreate TouchEvent (it would fail for desktops and throw error)
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
const move = (e) => {
//try to aboidany errors for touch screens
try {
var x = !isTouchDevice() ? e.pageX : e.touches[0].pageX;
var y = !isTouchDevice() ? e.pageY : e.touches[0].pageY;
} catch (e) {}
//Set left and top of div based on mouse position
myDiv.style.left = x - 160 + "px";
myDiv.style.top = y - 160 + "px";
};
//For mouse
document.addEventListener("mousemove", (e) => {
move(e);
});
//For touch
document.addEventListener("touchmove", (e) => {
move(e);
});
That’s all for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the download button below. Also, If you have any queries, suggestions, or feedback you can comment on them below.
Happy coding
