Jquery/Javascript image hover effect

August 19, 2009 4:53 PM

Web designers/developers: I'm looking for a script for a particular image hover effect (javascript/jquery), and I'm having no luck with Google.

The effect can be seen here - there's a lot going on in that site, but the part I'm interested in is the row of images along the bottom (featuring games). When you hover over one of them, the image pans a little bit along with the mouse. I'm looking for something along those lines - an effect that subtly pans or zooms an image within a static window in response to a mouse rollover.

The site I linked was created in Flash, but my Google searching turned up this similar effect using jquery, so it seems like it might be possible to achieve in a more accessible way. (That example would be great if only it worked as a rollover instead of requiring the viewer to hold down the mouse.)

I know little to nothing about either javascript or jquery, so it may be that I'm just not searching for the right terms. If anyone can point me in the right direction, I'd much appreciate it.

posted by Fifi Firefox to computers & internet (8 answers total)

Wix does that, I'll see if I can figure out how.
posted by lazaruslong at 4:56 PM on August 19, 2009

Link to the jQuery javascript library and try this within script tags in your header:

$(document).ready(function() {
    $(".outerDiv").hover(function() {
        $(".innerDiv").animate(
            left: "+=50px"
        ), 1000, "swing"},
        function() {
            left: "-=50px"
        ), 1000, "swing"}
    });
});

Document.ready loads this when the page is ready to display;
.hover is like the CSS pseudoclass, applied to an outer container div;
the first function within hover() handles rollover by sliding an inner div 50 px left over 1 second;
the second handles rollout by reversing that animation.

(Didn't try this code live so let me know if it doesn't work — jQuery syntax rewards OCD people! One thing to remember is that several of the above lines are function arguments, placed on separate lines for readability, and thus are separated by commas rather than terminated with semicolons.)
posted by sixswitch at 6:02 PM on August 19, 2009

Feel free to MeFiMail me as I'll be up and working for a bit yet.
posted by sixswitch at 6:03 PM on August 19, 2009

Sorry — should have added, "Replace outerDiv and innerDiv with the name of your (respectively) static container div and its animating child div.
posted by sixswitch at 6:05 PM on August 19, 2009

Would something like this do what you want?

Jquery For Designers: BBC Radio 1 Zoom Tabs
posted by backwards guitar at 6:08 PM on August 19, 2009

Do you know less about JavaScript or Flash? Because this would be relatively easy with Flash.
posted by rahnefan at 8:28 PM on August 19, 2009

Would this work?
posted by null terminated at 1:15 AM on August 20, 2009

I finally had a chance to play around with these, and jParallax is exactly what I'm looking for - thank you!

(Sixswitch, I tried your code but couldn't quite get it to work. I'm completely new at this though, so it's likely that I'm missing something basic but can't see it.)
posted by Fifi Firefox at 7:18 PM on August 20, 2009