最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - how to move background according to cursor hover? - Stack Overflow

programmeradmin3浏览0评论

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
Add a ment  | 

3 Answers 3

Reset to default 6

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.

发布评论

评论列表(0)

  1. 暂无评论