https://github.com/prinzhorn/skrollr

Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
https://github.com/prinzhorn/skrollr

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/prinzhorn/skrollr
• Owner: Prinzhorn
• License: mit
• Archived: true
• Created: 2012-03-18T15:41:35.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2018-01-23T20:05:59.000Z (almost 7 years ago)
• Last Synced: 2024-09-28T23:23:20.787Z (about 1 month ago)
• Language: HTML
• Homepage: http://prinzhorn.github.io/skrollr/
• Size: 1.58 MB
• Stars: 18,526
• Watchers: 717
• Forks: 3,500
• Open Issues: 262
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
[![Build Status](https://secure.travis-ci.org/Prinzhorn/skrollr.png)](http://travis-ci.org/Prinzhorn/skrollr)

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

* [skrollr-menu](https://github.com/Prinzhorn/skrollr-menu) - Hash navigation

* [skrollr-ie](https://github.com/Prinzhorn/skrollr-ie) - IE < 9 CSS fixes

* [skrollr-stylesheets](https://github.com/Prinzhorn/skrollr-stylesheets) - Keyframes inside CSS files

### Third party

* [skrollr-colors](https://github.com/FezVrasta/skrollr-colors) - Mix and match hex, rgb and hsl colors.

* [skrollr-decks](https://github.com/TrySound/skrollr-decks) - Fullpage presentation decks.

In the wild

-----

Check out the [wiki page](https://github.com/Prinzhorn/skrollr/wiki/In-the-wild) for websites using skrollr and feel free to add your own website :). You can also shamelessly add yourself to the list [here](https://github.com/Prinzhorn/skrollr/wiki/Agencies-and-freelancers) if you are offering paid skrollr support.

Further resources (tutorials etc.)

-----

Moved to the [wiki](https://github.com/Prinzhorn/skrollr/wiki/Resources).

Documentation

=====

First of all: look at the [examples and read the source ;-)](https://github.com/Prinzhorn/skrollr/tree/master/examples). 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](https://github.com/Prinzhorn/skrollr-stylesheets).

If you prefer to use JavaScript to define your animations make sure to take a look at [ScrollMagic](https://github.com/janpaepke/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 `