Parallax-JS
https://github.com/razorfish/Parallax-JS
↑こちらのJSを使ったサンプルを作ってみた。
初期状態でパララックスの動きが設定されており、
背景が動くだけのような簡単なものならほぼクラスを当てるだけで作れる。
必要があれば動きを細かく調整することも可能。
オブジェクトを動かすこともできるが、タイミングなどはあまり細かく設定できない。
特徴
・実装はほぼクラス名を付けるだけ
・背景は自動リサイズ
Background parallax
もっとも基本の背景画像のパララックス。
サイズは自動調整される。
Pause
指定のスクロール分停止させるられる。
Extend
コンテンツが伸びれば、ボックスも自動的に伸びる。
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
サンプルテキストです。
Sample text.
Action sample1
・画面に入ってくるとき
・画面に入った時
・画面から出るとき
の3つの状態をCSSで設定することで、要素をアニメーションさせることができる。
人物画像の位置をCSSで指定して動かすサンプル。
Action sample3
いろいろ組み込んだサンプル。
You'll notice that this page "locks" for a while.
This feature is optional and the pause length can be controlled.
END
最後にパララックス効果のないボックスが必要。