how to move background according to cursor hover?

Question

when cursor hovers the slider, background also moves with cursor hover.(link below)

here is link to site using this effect. telemaruk

what is this effect called? and how to achieve this effect? any useful link plz it is some kind of jquery plugin or simple css3 effect. I'cant figure it out please help.

Answer 1

I just created a Fiddle to show you what I meant with my comment on your question. You should be able to go further from there.

document.addEventListener('mousemove', function (event) {
    if (window.event) { // IE fix
        event = window.event;
    }

    // Grab the mouse's X-position.
    var mousex = event.clientX;
    var header = document.getElementById('header');
    header.style.backgroundPosition = mousex/3 + 'px 0';
}, false);

As to explain what's happening here:

• It binds a function on the mousemove event on document.
• It grabs the current mouse position using event.clientX.
• It changes the background-position of element #header with 1/3rd of the speed (mousex/3).

Check it live: FIDDLE

If you want the exact same thing as that website you linked, you should have a few divs over each other, and move their background positions at another speed. In this example it moves 1/3 from the speed of your mouse.