jQuery: Fullscreen "background" image that moves according to mouse position

Question

I am trying implement a full screen background that moves according to the position of the mouse position.

So for example, if you were to move the mouse to the top left, the view port would show the top left of the image and the rest of the image that can fit into the view port. In this case, let's say - the screen is 1280 * 960, but the image is 1800 * 1300.

I've seen this before, but I can't remember where and I can't think of the term used to describe what I'm trying to achieve. It's not parallax or scrolling background images...

Looking for a jQuery plugin and the beginning CSS I'll need to complete it.

Thanks to whomever knows the answer and solution!

Solution

Just so this has a clearer answer.

The effect is called panning and you can use the following plugin for achieving this in jQuery:

http://manos.malihu.gr/jquery-image-panning/

It's also worth taking a look at this example for just panning left to right using a fullscreen image (this is using CSS cover so not ideal for cross browser, but provides the key concepts for the mouse over effect if you're keen on a custom job)

http://www.dnitza.com/super-simple-panning-background/

Another live example from a theme:

http://demo.undsgn.com/egofolio/light/portfolio/double-trouble/

Comments

[Sven Bieder]

use the jQuery mousemove event. In it you can receive the actual coordinates of the mouse pointer and react accordingly to the position.

[Paradise]

this effect its called "panning" check this jquery plugin manos.malihu.gr/jquery-image-panning

[hatfieldajoshua]

Paradise, if you submit that as a separate response I'll make you the winner!