Animated Cursor Moving Animation Effect using CSS and JavaScript

This tutorial blog to learn how to create mouse cursor moving animation using CSS and JavaScript.

Video tutorial of Animated Cursor Moving Animation Effect using CSS and JavaScript

This tutorial video to learn how to create mouse cursor moving animation using CSS and JavaScript.

Animated Cursor Moving Animation Effect using CSS and JavaScript [Source Codes]

This source code can help you to create Animated Cursor Moving Animation Effect using CSS and JavaScript

jQuery library source

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
html{
	height: 100%;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #0f9ce5;
	min-height: 100vh;
	padding: 1px;
	cursor: none;
}

.cursor{
	position: fixed;
	width: 40px;
	height: 40px;
	left: -50px;
	top: -50px;
	border:2px solid rgba(255,255,255,1);
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
	border-radius: 50%;
	transition: all 0.7s ease-out;
	pointer-events: none;
	z-index: 1000;
	margin:7px 0 0 -2px;	
}
.cursor_2{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	transition: all 0.2s ease-out;
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
	background:#fff;
	margin:25px 0 0 15px; 
}
.cursor.active{
	animation: cursorAnim 0.3s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes cursorAnim{
	0%{
		transform: scale(1);
		box-shadow: 0px 0px 0px 5px rgba(255,255,255,0.8);
	}
	50%{
		transform: scale(2);
		box-shadow: 0px 0px 10px 5px rgba(255,255,255,0.5);
	}
	100%{
		transform: scale(1);
		box-shadow: 0px 0px 0px 5px rgba(255,255,255,0);
	}
}

JavaScript Code

Copy

$(document).ready(function() {
	$("body").prepend('<span class="cursor"></span>')
	$("body").prepend('<span class="cursor_2"></span>')
	var	top = 0;
	var	left = 0;
	$("body").on("mousemove",function(event) {
		top =$(window).scrollTop() - $(this).offset().top + event.clientY
		left =$(window).scrollLeft() - $(this).offset().left + event.clientX
		$('.cursor').css({"left":left - 30,"top":top - 30});
		$('.cursor_2').css({"left":left - 30,"top":top - 30});	
	});

	$("body").click(function(event) {
		if(!$('.cursor').hasClass('active')){
			$('.cursor').addClass('active');
		}
		setTimeout(function(){
			$('.cursor').removeClass('active');
			
		},300)
		
	});
	
});