How to make Mouse Movement Effects using Javascript

In this tutorial, i will show you How to Make Mouse Movement Effects using Javascript. You can see demo using click below button and also available source code.

Demo Download

Step to Make Mouse Movement Effects using Javascript

To make mouse movement effects we need to follow the below steps

1. Index.html
2. Css file
3. Javascript code

1: Index.html

First of all we create a index.html file for write content and connect to style.css file in head section and following code paste in body section.

<!-- <div class="circle"></div> -->

I have comment above code after check style.

2: css files

Now create a css file and connect in html.

*{
	margin: 0;
	padding: 0;
}
.circle
{
	width: 200px;
	height: 200px;
	border: 2px solid #000000;
	position: absolute;
	transform: rotate(-45deg);
	margin-left: -100px;
	margin-top: -100px;
	animation: animate 1s infinite alternate;
}
@keyframes animate
{
	0%{
		border: 2px solid #000000;
	}
	50%{
		border: 2px solid #ff0000;
	}
	100%{
		border: 2px solid #00e317;
	}
}

As you can see in above css code here we create a style for displaying on mouse movement cursor.

3: Javascript code

Now write a javascript code in body section of index.html.

	<script type="text/javascript">
		document.onmousemove = animateCircle;

		function animateCircle (event) {
			var circle = document.createElement("div");
			circle.setAttribute("class", "circle");
			document.body.appendChild(circle);

			circle.style.left = event.clientX + 'px';
			circle.style.top = event.clientY + 'px';

			circle.style.transition = "all 1s linear 1s";

			circle.style.left = circle.offsetLeft - 20 + 'px';
			circle.style.top = circle.offsetTop - 20 + 'px';

			circle.style.width = "10px";
			circle.style.height = "10px";
			circle.style.borderWidth = "5px";
			circle.style.opacity = 0;
		}
	</script>

In this JavaScript code we create div and connect direct with style class “circle” and make animation.

Conclusion

Today we learnt how to make mouse movement effects using JavaScript, you can add multiple this type of animation effects in your pages just by adding the CSS and JavaScript.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts