February 24, 2014
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.
<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
<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
© 2013 jquer.in
Curated By Jay Kanakiya