Simple Parallax scrolling at relative speeds

Question

I want to create a website with a simple parallax scrolling effect where the elements scroll at different speeds. I tried using the Skrollr library, but I couldn't make it do what I want. What Javascript library or technique could I use that would allow me to easily define a relative scrolling speed for an element?

Example:

<div data-speed="50%"></div>

I tried to use this tutorial: http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/, but I couldn't follow it very well. I need something very simple, as I am new to Javascript.

Answer 1

I'm glad you found out about stellar.js

If you (or anyone else who reads this post) are looking for more parallax tools, my company and I published a list of parallax tutorials at https://potentpages.com/web-design/parallax/tutorials

Here are some of the currently used methods methods of creating parallax websites:

• jQuery and jQuery-based libraries (including stellar.js)
• skrollr.js
• jarallax
• Javascript (without any libraries)
• CSS (without javascript)

We link to some tutorials for these methods at the link above.