スクロールに応じてパララックス効果を表現できるスクリプト・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にも対応可能です。

ライセンスはMITとGPLのデュアルライセンスです。以下よりどうぞ。

jarallax / on github

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services