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.
Share Improve this question asked Aug 22, 2013 at 7:07 hfarazmhfarazm 1,41717 silver badges22 bronze badges 1- 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
Reset to default 6I 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 ondocument
. - 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.
- You need to set their opacity based on you requirement.
- Set the z-index of the images so that they overlap and make the position absolute.
- 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.