How to move the background according to the cursor?

Question

when the cursor slides over the slider, the background also moves with the cursor. (link below)

here is a link to the site using this effect. telemaruk

what is called this effect? and how to achieve this effect? any useful plz link is some kind of jquery plugin or simple css3 effect. I understand, please help.

Answer 1

I just created Fiddle to show you what I had in mind with my comment on your question. You should be able to move on from there.

document.addEventListener('mousemove', function (event) { if (window.event) { // IE fix event = window.event; } // Grab the mouse X-position. var mousex = event.clientX; var header = document.getElementById('header'); header.style.backgroundPosition = mousex/3 + 'px 0'; }, false); 

How to explain what is going on here:

• It binds a function in the mousemove event on document .
• It captures the current mouse position using event.clientX .
• Changes the background position of the #header element at 1/3 speed ( mousex/3 ).

Check it out live: FIDDLE

If you want to get the same thing as the website associated with you, you should have several sections above each other and move their background positions at a different speed. In this example, it moves 1/3 of the speed of the mouse.

Answer 2

Look at these plugins, its parallax effect that you are going to do.

http://stephband.info/jparallax/

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

Answer 3

You need to have three images on top of each other.

• You need to establish transparency based on your requirement.
• Set the z-index of the images so that they overlap and make the position absolute.
• In the mouseover move the images, the top image is larger than the other two, the second is larger than the last.

This will give the desired effect.