Get new jQuery plugins just once a week

×

skrollr

February 24, 2014

skrollr | javascript library for parallax scrolling

skrollr is a full-fledged scrolling animation library for mobile (Android + iOS) and desktop written just plain JavaScript.This javascript library 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.
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).

You use the HTML5 data- attributes to define multiple sets of styles (we call each of them keyframe) and skrollr interpolates between them.

Example :-

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

Skrollr allows non-linear animations. The so called easing functions can be used per-property by putting them in square brakets behind the property

Example :


<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>

Created by Alexander Prinzhorn

Download

Example

skrollr jquery plugin

parallax scroll

skrollr

Related posts:

Scroll Path
scroll-up-bar
scrollgress
skrollr jquery plugin

http://jquer.in/wp-content/uploads/2014/02/skrollr.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever