Fade elements by mouse proximity using jQuery

I spruced up my personal “portal” last night, its got the same content as before, but I wanted to show off my JS skills a little. The site is at http://www.arronwoods.com, and contains links to my various sites and social network pages.

The idea was to scatter faded logos of the different websites around the page and as the user draws their mouse closer to the logo, the opacity increases and the logo gets brighter. I think it looks good, although I guess I could be confused with cheesy? I like it, I’m keeping it. :p

So, if you’d like to do something similar yourself I’d suggest you take the shortcut I discovered after coding up my own class, and just download this jquery plugin: jQuery approach

But if you were interested in the logic behind it, this is the core of the code:

$().mousemove(function(e){
elements.each(function(i, element){
var box = $(element);
var distance = parseInt(Math.sqrt(Math.pow(e.pageX-element.center.x,2) + Math.pow(e.pageY-element.center.y,2)));
var distanceRatio = (settings.distance - distance) / settings.distance;
 
if(distance &lt;= settings.distance)
{
var percentage = distanceRatio + settings.minimum;
box.css('opacity', percentage);
}
 
});
 
});

To save calculating the center on each mouse update, I calculate those on page load and store them on the element object using this code:

elements.each(function(i, element){
var box = $(element);
var offset = box.offset();
var center = { x: (offset.left + (box.width()/2)), y: (offset.top + (box.height()/2)) };
element.center = center;
});

Profile cancel