Learn to code Mouse Move animations in JS. This vide lesson will cover the mouse event handling and animation concepts in JS.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Circle Animation in JS</title>
<style type="text/css">
.circle {
width: 20px;
height: 20px;
border: 1px solid #000;
position: absolute;
border-radius: 15px;
}
</style>
</head>
<body>
<script type="text/javascript">
document.onmousemove = animateCircles;
var colors = ['#ccc','#6cf','#eba13a'];
function animateCircles (event) {
let circle = document.createElement("div");
circle.setAttribute("class", "circle");
document.body.appendChild(circle);
circle.style.left = event.clientX + 'px';
circle.style.top = event.clientY + 'px';
var color = colors[Math.floor(Math.random() * colors.length)];
circle.style.borderColor = color;
circle.style.transition = "all 0.5s linear 0s";
circle.style.left = circle.offsetLeft - 20 + 'px';
circle.style.top = circle.offsetTop - 20 + 'px';
circle.style.width = "50px";
circle.style.height = "50px";
circle.style.borderWidth = "5px";
circle.style.opacity = 0;
setTimeout(function() {
circle.remove();
}, 500);
}
</script>
</body>
</html>