jQuery: Fullscreen “background” image that moves according to mouse position [closed]

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!

Answer 1

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/