Any.DO About Page

[srikarg]

Hello all,

I just wanted to know how the folks over at Any.DO were able to achieve the effect with the pictures (the pictures of the people) on this page: http://www.any.do/about.

Is it just a mouse listener that changes the images depending on the mouse’s position? I was just wondering, as I want to achieve a similar effect. Thanks in advance!

[TheDoc]

var thumbnails = $(“.portrait .thumbnail”);

$(window).mousemove(function(mouseEvent) {
thumbnails.each(function() {
var mouseX = mouseEvent.pageX;
var mouseY = mouseEvent.pageY;

var offset = $(this).offset();

var startX = offset.left;
var startY = offset.top;

var endX = startX + $(this).width();
var endY = startY + $(this).height();

$(this).removeClass(“top middle bottom left center right”);

if (mouseX < startX) {
$(this).addClass(“left”);
} else if (mouseX > endX) {
$(this).addClass(“right”);
} else {
$(this).addClass(“center”);
}

if (mouseY < startY) {
$(this).addClass(“top”);
} else if (mouseY > endY) {
$(this).addClass(“bottom”);
} else {
$(this).addClass(“middle”);
}

});
});

[Alen]

Right click and view the source, It’s right there…

[Author]

Posts