JQuery Image Animation Trick With Mouse Position

December 27th, 2012 by aditia rahman / No Comments  

     

In this short tutorial post, I create a simple code in jquery to creating an animation look a like effect, that triggered by mouse cursor position. This trick can be used for animating photo profile, with changing the image source on html element or in this case I change the class value.

Basically this post inspired by Any.DO about page, example in this post is a simpler one, all you need is to detect image offset (width and height), image position relative to windows, document mousemove event to detect mouse position, and the conditional statement to decide which image you want to show.

View Demo

<!DOCTYPE html>
<html>
<head>
	<title>JQuery Mouse Direction</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script>
	$(function() {
		var img_x1, img_x2, img_y1, img_y2;

		function set_xy_img() {
			img_x1 = $('#container div').offset().left;
			img_x2 = $('#container div').offset().left + $('#container div').width();
			img_y1 = $('#container div').offset().top;
			img_y2 = $('#container div').offset().top + $('#container div').height();
		}

		set_xy_img();

		$(window).resize(function() {
			set_xy_img();
		});

		$(document).mousemove(function(e){
		  $('#container div').removeAttr('class');

		  // front image
		  if (e.pageY > img_y1 && e.pageY < img_y2
			&& e.pageX > img_x1 && e.pageX < img_x2) {
			$('#container div').addClass('front');
		  }
		  else
		  // top image
		  if (e.pageY < img_y1 && e.pageX > img_x1 && e.pageX < img_x2) {
			$('#container div').addClass('top');
		  }
		  else
		  // bottom image
		  if (e.pageY > img_y2 && e.pageX > img_x1 && e.pageX < img_x2) {
			$('#container div').addClass('bottom');
		  }
		  else
		  // left image
		  if (e.pageY > img_y1 && e.pageY < img_y2 && e.pageX < img_x1) {
			$('#container div').addClass('left');
		  }
		  else
		  // right image
		  if (e.pageY > img_y1 && e.pageY < img_y2 && e.pageX > img_x2) {
			$('#container div').addClass('right');
		  }
		  else
		  // top left image
		  if (e.pageY < img_y1 && e.pageX < img_x1) {
			$('#container div').addClass('top-left');
		  }
		  else
		  // top right image
		  if (e.pageY < img_y1 && e.pageX > img_x1) {
			$('#container div').addClass('top-right');
		  }
		  else
		  // bottom left image
		  if (e.pageY > img_y1 && e.pageX < img_x1) {
			$('#container div').addClass('bottom-left');
		  }
		  else
		  // bottom right image
		  if (e.pageY > img_y1 && e.pageX > img_x1) {
			$('#container div').addClass('bottom-right');
		  }
	   });

		//console.log($('#container div').offset());
		$('#container div').mouseover(function() {
			//$(this).removeAttr('class');
			//$(this).addClass('front');
		});

		$('#container div').mouseout(function() {
			$(this).removeAttr('class');
			$(this).addClass('top');
		});
	});
	</script>
	<style>
	#container {
		margin-top:200px;
	}
	#container div {
		margin: 0 auto;
		width: 150px;
		height: 150px;
	}
	.front { background: url('img/luffy-front.jpg'); }
	.top { background: url('img/luffy-top.jpg'); }
	.bottom { background: url('img/luffy-bottom.jpg'); }
	.left { background: url('img/luffy-left.jpg'); }
	.right { background: url('img/luffy-right.jpg'); }
	.top-left { background: url('img/luffy-top-left.jpg'); }
	.top-right { background: url('img/luffy-top-right.jpg'); }
	.bottom-left { background: url('img/luffy-bottom-left.jpg'); }
	.bottom-right { background: url('img/luffy-bottom-right.jpg'); }
	</style>
</head>
<body>
	<div id="container">
		<div class="front"></div>
	</div>
</body>
</html>
        submit to reddit Delicious

No Comment Leave a Comment Subscribe RSS

Leave a Comment