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 DownloadStep to Make Mouse Movement Effects using Javascript
To make mouse movement effects we need to follow the below steps
- Index.html
- Css file
- 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 DownloadI 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