以下、サンプルについては、skrollrのdata-属性で左ボーダーの幅を変化させている。右ボーダーについては、後述のclass解説にある、 skrollable-before,skrollable-between,skrollable-afterのクラスによって色が変化する。

data-属性

主にskrollr.jsに変化の起きるタイミングと、変化の内容を指示をする為に使うdata属性。keyframe:valueの形式で書く。

valueについてはstyle要素のvalueの形式で、cssを書けば良い。一部、拡張されており、ベンダープレフィクスを付けずに書けば、skrollrが処理してくれる。

keyframeの書き方は以下の2通りで、混在可能。

absolute mode

ページがどれだけスクロールされたのかを基準にして、各要素の振る舞いを決める書き方。

data-0 = data-start = data-0-start: スクロール量が、ページの最上部から0の時点
```
data-0="border-left-width:0px"
data-400="border-left-width:100px"
```
スクロール量0から400まで、だんだんborder-leftが増える
data-700 = data-700-start: ページの最上部からのスクロール量が 700px の時点
```
data-700="border-left-width:0px"
data-900="border-left-width:100px"
```
スクロール量700から900まで、だんだんborder-leftが増える
data--100 = data--100-start: ページの最上部からスクロール量が -100pxの時点 (ページ最上部から-100pxの位置にいた時点から、アニメーションの変化が始まっているものとして計算される。)
data-end = data-0-end: ページの最下部からのスクロール量が 0。
data-100-end: ページの最下部からのスクロール量が 100px。ページの最下部に到達する100px手前の時点。
data--100-end: ページの最下部を超えたスクロール量が 100px。

relative mode

viewport-anchorは必須。他は省略できる。viewportと、要素との位置関係によって各要素の振る舞いを決める書き方。
書式はdata-[offset]-(viewport-anchor)-[element-anchor]。
offset には整数を指定する。マイナスの値も指定可能。初期値は 0
viewport-anchor (必須) と element-anchor (省略可) に指定できるのは top, center bottom のいずれか。
element-anchor が省略された場合は、viewport-anchor の値が使われる。この時の振る舞いは、background-positionのそれと同じ様な考え方になる。

data-top = data-0-top = data-top-top = data-0-top-top: 画面（viewport）の上辺と、要素の上辺が重なった時点。
```
data-top="border-left-width:100px"
data-top-bottom="border-left-width:0px"
```
data-100-top = data-100-top-top: 画面（viewport）の上辺から100px下の位置に要素の上辺が来た時点。
```
data-100-top="border-left-width:0px"
data-top-bottom="border-left-width:100px"
```
data--100-top = data--100-top-top: 、画面（viewport）の上辺から-100pxの位置に、要素の上辺が来た時点（要素の高さが100px以下の時は、最後の方の変化が見えない）。
```
data-0="border-left-width:0px"
data--100-top="border-left-width:100px"
```
data-top-bottom= data-0-top-bottom: 画面（viewport）の上辺に、要素の下辺が来た時点。 (結果的に見えない)
```
data-0="border-left-width:0px"
data-top-bottom="border-left-width:100px"
```
data-center-center = data-0-center-center: 画面（viewport）の上下中央のラインに、要素の上下中央のラインが来た時点。
```
data-center-center="border-left-width:0px"
data-top-top="border-left-width:100px"
```
data-bottom-center = data-0-bottom-center: 画面（viewport）の最下部に、要素の上下中央のラインが来た時点。 thus the upper half of the element is visible.
```
data-bottom-center="border-left-width:0px"
data-top-top="border-left-width:100px"
```

skrollr 0.6.26 の要約と解説