What is skrollr.js?
Skrollr is a JavaScript-plugin that helps you animate objects on your webpage as you scroll. A lot of people call it “Parallaxing”, but that is just one of many effects you can add to your site. There are plenty of these kind of plugins out there, but from my light testing I found Skrollr to be the most lightweight and straight-to-the point of what I needed.
You just include Skrollr and then append data-attributes in your HTML, this will create animation keypoints at different scroll positions. Then tweak your animations with normal CSS-styles while Skrollr works the magic. It doesn’t even need jQuery, so it’s a very quick load.
The data attributes are all that you need to add to trigger Skrollr. Skrollr will automagically animate any CSS you place between your start and stop positions.
data-start is the starting point of your entire page, the absolute top, your page’s y-axis = 0.
data-500-start is the end and triggers 500 pixels from the very top (start) of the page.
Video tutorial for skrollr.js
