Mouse position based opacity


A jQuery function

The idea is to use some jQuery to define an invisible circle around the center point of an element, and to lower the element’s opacity as the user’s mouse gets closer to its center. This started out as a mental exercise and bloomed into a small demo and some jQuery that I’d like to share.

Referring to the image above, the jQuery that I’ve put together will define the red circle within the element and begin to fade the image as you approach the center. The effect works best with an image that is close to square, but it will define the circle within any sized image.

The code is pretty well commented, so I won’t spend any time explaining it. I’ve also put together a quick demo, where I fade the above blurred image into an un-blurred version. You can find the demo here. You can also find this source on github.


$('body').on({ mousemove:
	function(event) {

		// Get mouse location relative to the element's top left-most point
		var mouse_x = event.pageX - $(this).offset().left;
		var mouse_y = event.pageY - $(this).offset().top;

		// Get element's width and height
		var element_w = $(this).width();
		var element_h = $(this).height();

		// Shortest side will be used for circle of opacity change
		// We'll split it in half for later

		// Is element tall or wide?
		if(element_w <= element_h){
			var shortside_len = Math.round(parseInt(element_w) / 2);
		}
		else{
			var shortside_len = Math.round(parseInt(element_h) / 2);
		}

		// Find center of image x & y
		var center_x = Math.round(parseInt(element_w) / 2);
		var center_y = Math.round(parseInt(element_h) / 2);

		/*
			Treat the center of the element as x=0 y=0, but with no negative area
			so we'll have to math that out
		*/

		// Mouse to the left of center
		if(mouse_x <= center_x){
			var plane_x = parseInt(center_x) - parseInt(mouse_x);
		}
		else{
			// Mouse to right of center
			var plane_x = parseInt(mouse_x) - parseInt(center_x);
		}

		// Mouse above center
		if(mouse_y <= center_y){
			var plane_y = parseInt(center_y) - parseInt(mouse_y);
		}
		else{
			// Mouse below center
			var plane_y = parseInt(mouse_y) - parseInt(center_y);
		}

		/*
			Now we need to find the distance between the mouse
			and the center of the element.
			Thanks to http://www.mathopenref.com/coorddist.html for the formula.
			Since we're only looking for the distance from the center
			dx = plane_x and dy = plane_y
		*/

		var distance = Math.round(Math.sqrt(Math.pow(parseInt(plane_x), 2) + Math.pow(parseInt(plane_y), 2)));

		/*
			Now we're going to use the distance from the center of the element to
			the closest edge to create a circle of opacity change. Any time the
			mouse enters that circle, the opacity of the element will decrease as
			the mouse gets closer to 0;
		*/

		// Find average between 0% and 100% (0 and 1) distance from center to edge of circle
		var average = parseInt(distance) / parseInt(shortside_len);

		// Only adjust opacity if mouse is inside circle
		if(average < 1){
			$(this).fadeTo( 0, average);
		}

	}// click event
},'#your_element_id_here');

This entry was posted in jQuery.