パララックスサイトを作る上で便利なプラグイン・ツール

パララックスサイトを作る上で便利なプラグイン・ツールをまとめました。

プラグインの前に…
jQueryでスクロールされた距離を取得する方法

$(window).scroll(function(){//スクロール時に実行
    var scrolTop = $(window).scrollTop();//ページトップからのスクロール位置を取得
});

(ちなみにで横スクロールの値を取得するには.scrollLeft()になります。)

スクロールイベントについては、どこから値を取るかで挙動が違うようで、
$(“body”)、$(“html”)、$(document)だとブラウザによってはうまく動作しません。

この他にパララックスに関するイベントについてはパララックスでのイベントの考察。が参考になります。

パララックスサイトを作る上で便利なプラグイン

Scrolling Parallax(※IE7未対応)

スクロール速度を変えて背景画像をずらしてみせることができるプラグインです。
オプションで設定できる値は↓こんなかんじです。

$('#hoge').scrollingParallax({
    bgWidth : '250%',  //画像の横幅
    bgHeight : '50%',  //画像の縦幅
    bgRepeat : true,  //画像をリピートするかどうか
    staticSpeed : 3,  //スクロール速度
    staticSpeed​​X:0.5, //スクロール速度(x方向)
    loopIt : true    //ループするかどうか
});

TweenJS

JSのトゥイーンライブラリで、スクロールバーをタイムラインとして見立てることができます。
EaselJS(HTML5のcanvasをFlashに似た操作で扱うことができるようになる)と合わせて使われてます。

PNGデータを軽くできるツール

透過PNG画像を使ってて重いと感じたときに使えるツールです。