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 ;-)
skrollrの指定なし
data-bottom-top="background-position:0px 0px;" data-end="background-position:0px -1000px;"
data-bottom-top="background-position:0px 0px;" data-end="background-position:0px -500px;"
data-bottom-top="background-position:0px 0px;" data-end="background-position:0px -500px;"
スクロール量に合わせてdivのwidthを増やしていき、かつ背景色をグラデーション
data-0="width:0%;background:hsl(0, 100%, 50%);" data-end="width:100%;background:hsl(500, 100%, 50%);"
data-0="width:0%;background:hsl(0, 100%, 50%);" data-end="width:100%;background:hsl(500, 100%, 50%);"
ABSOLUTEの場合
data-[スクロール量]-[startまたはend]=”style”
という書き方になります。
startまたはendは省略可で、その場合はstartと同じになります。
RELATIVEの場合
data-[offset]-(viewport anchor)-[element anchor]=”style”
という書き方になります。
viewport anchorは必須で、ここが起点になります。