- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘Other’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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!
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”);
}
});
});
Right click and view the source, It’s right there…