如何在滚动上左右移动div？

Question

I would like to animate in js a simple div on scroll as you can find here grooveshark .

As you can see, the animation reacts to scroll up/down and move horizontally. This is typically what I need. How can I easily determine this feature in js? Thanks

Answer 1

It's called parallax .

You can achieve this yourself using a combination of CSS attribute changes and scroll detection events, or just use a plugin like SkrollR http://prinzhorn.github.io/skrollr/

For this particular example, you can see the inline styles of that div being changed on scroll (in developer tools):

<div class="albums-holder" style="background-position: 1174px 50%;">...

You can do this on the scroll event:

$(window).scroll(function() {
  $(".albums-holder").css( "background-position", [VALUE]);
});

Where [VALUE] would be computed by incrementing/decrementing the background-position by a value each time.

EDIT: I failed to mention, my answer is based on the assumption you have jQuery on the page, I would recommend it is for tasks like this anyway.