skrollr入門
[relative mode] グラデーションさせているdivが画面に現れ始めたら色を変化させる。
今回の場合はまず、グラデーションさせているdivにid="gradi"をつけた。
次にdata-anchor-target="#gradi"を変化を起こしたいdiv(つまりこのdiv)に指定した。
skrollrのポイント
- 色はrgbかhslで指定する。
- 単位を揃える。
- ベンダプレフィックスは必要なし。
- [absolute mode] とは、スクロール量で変化させるモード。
- [relative mode] とは、data-anchor-targetを指定し相対的に変化させるモード。
[absolute mode] 色をスクロール量で変えてみる。
[absolute mode] 左から出現して止まる。
[absolute mode] 左から出現して右へ消える。data-○○○はいくつ並べてもOK。
[absolute mode] 回転させる。
[absolute mode]
背景色をグラデーションさせてみる。
[relative mode] ブラウザの画面のcenterに要素のtopが来たら回転が始まり、画面のtopに要素のtopが来たら回転が止まる。