CODEWITHSUNDEEP
javascriptcssanimationscroll
bep42
bep42

Reputation: 351

How to move left to right a div on scroll?

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

Upvotes: 2

Views: 3308

Answers (1)

user1017882
user1017882

Reputation:

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.

Upvotes: 3

Related Questions