skrollr

by Prinzhorn

Prinzhorn /skrollr

Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain...

18.5K Stars 3.6K Forks Last release: Not found MIT License 606 Commits 45 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Build Status

Please note:

skrollr hasn't been under active development since about September 2014 (check out the contributions graphs on https://github.com/Prinzhorn/skrollr/graphs/contributors) and I don't have any plans for doing major changes to it. Please consider this before using skrollr in production as problems with new browser versions, especially on mobile, will most definitely surface. To be honest, mobile support always sucked (because mobile browsers are hard) and you shouldn't compromise UX for some fancy UI effects. Ever.

skrollr 0.6.30

Stand-alone parallax scrolling JavaScript library for mobile (Android, iOS, etc.) and desktop in about 12k minified.

Designer friendly. No JavaScript skills needed. Just plain CSS and HTML.

Actually, skrollr is much more than "just" parallax scrolling. It's a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. But I wanted to sound hip and use some buzz-words. By the way, skrollr leverages HTML5 and CSS3 ;-)

Resources

Plugins

Official

Third party

In the wild

Check out the wiki page for websites using skrollr and feel free to add your own website :). You can also shamelessly add yourself to the list here if you are offering paid skrollr support.

Further resources (tutorials etc.)

Moved to the wiki.

Documentation

First of all: look at the examples and read the source ;-). This might give you a feeling of how stuff works and you can see how some patterns can be implemented.

Abstract

skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position. All you need to do is define key frames for each element at certain points in top scroll offset.

Other libraries require you to write JavaScript in order to define your animations. This introduces two main problems:

  • Animation and element are not at one place. In order to find out if any animations are defined for a given element, you have to scroll through many (sometimes thousands) of lines of JavaScript.
  • You have to learn a new syntax which is often very verbose and limited at the same time.

With skrollr, you put the definition of your key frames right where they belong (to the element) using a syntax you already know (plain CSS).

If you would rather have the keyframes inside a separate file, take a look at skrollr-stylesheets.

If you prefer to use JavaScript to define your animations make sure to take a look at ScrollMagic. It depends on both jQuery and the Greensock Animation Platform (GSAP) and gives you full control over every detail of your animations.

Let's get serious

First of all you want to include the

skrollr.min.js
file at the bottom of your document (right before the closing

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.