Grow your CSS skills. Land your dream job.

Any.DO About Page

  • # March 20, 2013 at 6:53 pm

    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!

    # March 20, 2013 at 7:05 pm

    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”);
    }

    });
    });

    # March 20, 2013 at 7:11 pm

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

    # March 20, 2013 at 8:26 pm

    Thanks @TheDoc and @AlenAbdula!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".