お久しぶりでございます。
年初に今年は”アウトプット宣言”しておきながら、長らく更新STOPしてしまいました。
というのも、記事を書こうとするといつもこう、ヤツにPCを占拠されてしまう有様でどうにもこうにも…
というのはただのいい訳です。もう少し更新頻度上げてく様頑張らねば(^^;
さて、今日はパララックス(視差効果)が簡単に実装出来る、skrollrの使い方をやってみたいと思います。
デモを作ってみましたので、こちらをご覧下さい。
まずGitHubからskrollr.jsをダウンロードします。
html側にはskrollr.min.jsファイルとjqueryを読み込ませます。
下のコードをhtmlのどこかにペースト、以上です。簡単ですね！
<script src="js/skrollr.min.js"></script>
<script>
var s = skrollr.init();
</script>デモではほぼ全てのdivにdata属性をつけて動かしています。
ポイントは…
- data-○○=”ここに普通にcssを書けばよい”
- 色はrgb(a)かhsl(a)で指定する。
- 単位を揃える。%とかpxとかを混ぜて使わない。
- ベンダプレフィックスは必要なし。
- skrollrにはmodeが二つあって、[absolute mode] とは、スクロール量で変化させるモード。
- [relative mode] とは、data-anchor-targetを指定し相対的に変化させるモード。