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.

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.

• javascript
• jquery
• css

• 2 Create a mousemove event on the window which will update the background's position. You probably have to use a translucent background for the same effect as that website. – Broxzier Commented Aug 22, 2013 at 7:10

3 Answers 3

I just created a Fiddle to show you what I meant with my ment 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.

have a look at these plugins, Its parallax effect your going for.

http://stephband.info/jparallax/

http://bmc.erin.utoronto.ca/~walid/newmediasite/parallax/files/parallax.html

What you need is to have three images one over the other.

1. You need to set their opacity based on you requirement.
2. Set the z-index of the images so that they overlap and make the position absolute.
3. On mouseover, move the images, the top image more than the other two, the second one more than the last.

This will give the desired effect.