Cursor Moving Bubbles Animation Effect in jQuery

Creative jQuery | January 29, 2021

This is best blog for mouse moving bubbles animation effect using CSS and jQuery.

Video tutorial of Cursor Moving Bubbles Animation Effect in jQuery | Mouse Moving Animation using CSS and jQuery

This is best video for mouse moving bubbles animation effect using CSS and jQuery.

You might like this

Cursor Moving Bubbles Animation Effect in jQuery | Mouse Moving Animation using CSS and jQuery [Source Codes]

This source code can help you to create Cursor Moving Bubbles Animation Effect in jQuery | Mouse Moving Animation using CSS and jQuery

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>
<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="cursor_area">
	
</div>
<!-- <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;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #0f9ce5;
	min-height: 100vh;
}

.cursor_area{
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
}

.cursor{
	position: fixed;
	width: 60px;
	height: 60px;
	box-shadow: 0px 0px 0px 5px rgba(255,255,255,1);
	border-radius: 50%;
	transition: all 0.5s ease-in-out;
	animation: cursorAnim 0.5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	pointer-events: none;
	z-index: 1000;

	
}

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

JavaScript Code

Copy

$(document).ready(function() {
	$("body").mousemove(function(event) {
		var top =$(window).scrollTop() - $(this).offset().top + event.clientY
		var left =$(window).scrollLeft() - $(this).offset().left + event.clientX
		
		
		setTimeout(function(){
			$(".cursor_area").prepend('<span class="cursor"></span>')
			$('.cursor').css({"left":left - 30,"top":top - 30});
			
		},100)
		setInterval(function(){
			$('.cursor').eq(30).remove()
		},5000)

		
		
	});
	
});