スクロールに応じてパララックス効果を表現できるスクリプト・jarallax

スクロールに応じて視差効果
を表現できるスクリプト・
jarallaxのご紹介。jQueryを
必要とするみたいです。よく
見かけるやつですが、デモが
良かったので備忘録的に。

jQuery依存のパララックスエフェクト実装スクリプトです。時間無いので紹介だけとさせて頂きます。

jarallax

よくあるパララックス実装スクリプト。デモ作る暇が無かったので公式のをご覧下さい。

Sample

フェードエフェクトがうまく使われてます。

アニメーションの定義をcloneAnimationでクローン化出来る様にしたそうです。

var jarallax = new Jarallax();
var animation = jarallax.addAnimation('#foo',[{progress:'0', opacity:'0', top:'100%'},
                                                 {progress:'10', opacity:'1', top:'40%'},
                                                 {progress:'20', opacity:'0', top:'0%'}]);
                        
jarallax.cloneAnimation('#bar',{progress:'+10'}, animation);
jarallax.cloneAnimation('#hoge',{progress:'+20'}, animation);
jarallax.cloneAnimation('#huga',{progress:'+30'}, animation);

スクロールやD&Dにも対応可能です。