みなさま、ごきげんよう。
2014-07-25 勉強会でskrollrの実装方法について、確認しました。
自分のサイトや作品をパララックスにしたい人必見!!
この勉強会では”skrollr”というJavaScriptライブラリを使用しました。パララックスサイトの理解が曖昧な人や、初めてパララックスに挑戦する人は、以下の手順でやってみましょう。
パララックスとは
視差のことです。画像など複数のレイヤーを違った速度でスクロールさせることによって、奥行きを感じさせる表現手法です。
skrollrについて
スクロール量に応じて要素を動かすことで簡単にパララックスを実装できるJSライブラリです。
skrollrの実装方法
skrollr.jsをダウンロード
githubからダウンロードしてください。
htmlのbodyにskrollrを実行させるコードを記述する
|
1 2 3 4 |
<script src="js/skrollr.min.js"></script> <script> var s = skrollr.init(); </script> |
これをbodyのどこかにコピペでOKです。
htmlの要素に”data-“属性でスクロール量に応じた動きを指定する
“data-“属性の書き方には“absolute mode”と“relative mode”の2つがあります
absolute mode
ページがどれだけスクロールされたのかを基準にして、各要素の振る舞いを決める書き方。DEMOは、このページの右上に、position:fixedで表示しています。
- 書式はdata-[offset]-[anchor]。
- offsetは整数を指定する。マイナスの値も指定可能。初期値は 0
- anchorには、start か、endのいずれかを指定できる。offsetの基準点になる。初期値は start
- offsetとanchorのいずれかを省略しても良い場合がある。
例えばdivの背景色を100pxスクロールする間に赤くなるようにするには
|
1 2 3 4 5 |
<div data-0="background-color:rgb(255,255,255);" data-100="background-color:rgb(255,0,0);"> 100pxスクロールする間に赤くなる </div> |
このように書きます。
“data-x”のxのところにはスクロール量の値を整数で指定します、−も可です。
初期値は０で一番上のスクロールしていない状態です。
“data-x-start”または”data-x-end”という指定もできて、これらはそれぞれ意味が少し違ってきます。
“data-x-start”は”スクロール量xの時に指定した動きが始まる”という意味で、”data-x”と同じ動きです。
ですが、”data-x-end”のときのxは起点が一番下になって、”スクロールが終わるところまでの残りのスクロール量”という意味になります。
これは例えば、一番下までスクロールすると”TOPへ戻る”ボタンが出てくるといった動きの指定に使えます。
また、xの値を省略することができ、この場合は”data-start”はページのトップでスクロールしていない状態（data-0と同じ）、”data-end”はスクロールが終わったとき、となります。
relative mode
- viewportと、要素との位置関係によって各要素の振る舞いを決める書き方。
- 書式はdata-[offset]-(viewport-anchor)-[element-anchor]。
- viewport-anchorは必須。他は省略できる。
- offset には整数を指定する。マイナスの値も指定可能。初期値は 0
- viewport-anchor (必須) と element-anchor (省略可) に指定できるのは top, center bottom のいずれか。
- element-anchor が省略された場合は、viewport-anchor の値が使われる。この時の振る舞いは、background-positionのそれと同じ様な考え方になる。
例えば、divの上辺が画面の上下中央にきたら回転し始め、divの下辺が画面の上下中央にくるまでに1回転するには
|
1 2 3 4 |
<div data-center-top="transform:rotate(0deg);" data-center-bottom="transform:rotate(360deg);"> </div> |
このように書きます。この下にあるDEMOをrelative modeで指定しています。
skrollrについての説明を先生がわかりやすく訳してくださいましたので、こちらを参考にしてください。
skrollrについて
パララックスじゃないじゃないか！
はい、このままでは、skrollrを実装しただけで、パララックスではありません。パララックスにする為のskrollrの指定については、次回の勉強会をお楽しみに。
skrollrの書き方のポイント＆参考になったサイト
- “data-“属性のvalueはcssを書けばOKです。
- 一つの要素でのcssのプロパティの単位は統一してください。
- ベンダープレフィックスは必要ありません。
- 色の指定は、”rgb” か “hsl” でしてください。
パララックスについてはこちらのサイトが参考になると思います。
「パララックス」をはじめとする「スクロールエフェクト」の魅力とは
もういい加減飽きてるかもしれないけどパララックスサイト集めてみた
skrollrについてはこちらのサイトが参考になると思います。
パララックス効果を簡単に実現するJSプラグイン skrollr の使い方
簡単！パララックスサイトの作り方
[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr
それではみなさま、ごきげんよう。
absolute modeのDEMO
1500から2000で右に消える
最下部で右にはける
ピンバック: skrollr.jsで背景をパララックスしてみた | パソコン倶楽部りんご
ピンバック: パララックスが簡単に実装出来る！skrollrの使い方 | Freyja's Ramblings