Search code examples
jquerytwitter-bootstrapparallaxskrollr

How to do horizontal parallax scrolling

I'm using the latest version of Bootstrap, JQuery, and Skrollr.

I would like to have a static background and a couple scenes that occur as you scroll by parallax scrolling. I'm able to make scenes as you scroll but I'm looking for a way to where it appears that you are not moving down the page.

I'm looking to make a scene like this image:

example

Notice how it moves right-left but never appears like you are actually scrolling down the page.

That's the best I can explain it. Can't seem to find any good tutorials to accomplish this. Any help in the right direction would be outstanding.

Solution

  • As mentioned in the comments, horizontal scrolling isn't supported by skrollr, but you can do something else:

    You can use the vertical scrollbar to animate elements in a horizontally.

    Here's a Stack Overflow post on Horizontal scrolling effect with Skrollr
    And here's a working demo in jsFiddle from that post

    Hope this gets you going.