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.

Answer 2

I've just answered this question to myself. I didn't want to use any libraries because I need only one simple effect and I had a feeling that solution should be simple as far as I want a simple result. So first comes scss mixin (you can do it with vanilla css anyway):

@mixin background-fixed($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100vh;
}

You can play with size and position though. But here in my humble opinion I give the most general used example. Next we use the mixin for styling block that will have parallax effect:

#block-id {
  @include background-fixed('/images/your_img.jpg');
}

Next we need some jquery scripting. First lets create some functions to make our coder's life easier:

function inVisibleRange(block) {
  return ($(window).scrollTop() <= $(block).offset().top + $(block).outerHeight() && $(window).scrollTop() >= $(block).offset().top - $(window).height())
}

function parallaxScroll(block) {
  if (inVisibleRange(block)) {
    $(block).css('background-position-y', $(window).scrollTop() - $(block).offset().top + 'px');
  }
}

And finally we use this functions inside window scroll event handler:

$(window).scroll(function() {
  parallaxScroll('#block-id');
}

And here we are having the desired parallax background effect. But as you can see the speed of parallax effect is equal to scrolling speed. If we want to customize the speed of parallax effect (and here is some street magic) we use nothing more than a simple division operation and apply it to the calculation of background-position-y :

($(window).scrollTop() - $(block).offset().top) / 1.3

Yes we loose some small parts of image at top and bottom. But I find this one as a good hack that doesn't effect appearance in a bad way. Simple as cutting with axe. But do we need super laser to cut a small tree? Well, I think that as for me I certainly prefer to cut it with cool laser stuff. But lets don't take that in consideration and pretend like my metaphor was at the right place.

Answer 3

I solved this by using the Stellar.js library instead--much better suited for this.