Change background position (or image) based on pointer location

[Nine]

Hi everyone,

 

I'd like to incorporate this in my own wordpress website:

http://www.atticweb.nl/wp-admin. The image of the building changes due to the location of your mouse pointer. With the developer tool in Chrome I figured out that the background position is changing in the CSS. But I can't figure out how this is written into the CSS and which input is used. Can someone help me with this? (The owner of the site doesn't know either).

 

Thanks a lot,

Nine

[niche]

Looks like you'll need jquery

 

http://stackoverflow.com/questions/17790869/rotating-elements-according-to-cursor-position-with-jquery

[Ingolme]

The image being rotated is actually a long strip of images in one image file( http://www.atticweb.nl/photos/sprite.png ).

 

The element it is contained within has a fixed width and height, the background position tells it which part of the image is visible (this technique is called CSS sprites). Javascript is being used to calculate which frame of the strip to show based on the position of the mouse relative to the element. There's some math involved based on the number of frames, the mouse X position, the image's X position and the image's width.

 

This isn't done using CSS 3 transforms because the rotation you're seeing is not actually a transform, it's simply a set pre-rendered images, and the images are of a 3D model which CSS can't control.

[Nine]

Thanks so far, that helps me to search further in the right direction!