スクロールでアニメーションを制御できるjQueryプラグイン「jQuery.isAlive」

縦長でパララックス効果を使ったサイトが最近流行りなのでしょうか、よく見かけるようになりましたね。
» 視差効果（パララックス）| 縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG

こういうのを見ると色々あるんだなーとか、デザイナーさんすごいなーとか思います。
パララックス効果を付けれるjQUery プラグインは結構いっぱいあって紹介するのはかなり今さらかんがあるのですが、
日本語で紹介されてるとこがないからという理由で「jQuery.isAlive」というプラグインを紹介します。

githubのリポジトリ
 georgecheteles/jQuery.isAlive · GitHub

英語の公式マニュアル
jQuery.isAlive Manual

まずはダウンロード

$ git clone https://github.com/georgecheteles/jQuery.isAlive.git

htmlはこんな感じ

<!doctype html>
<html>
<head></head>
<body>
	<div id="drawSurface1">
		<div class="myDiv1"></div>
	</div>

	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.isAlive.min.js"></script>
	<script type="text/javascript" src="easing.js"></script>
	<script type="text/javascript" src="jquery.isAlive.helper.js"></script>

	<script type="text/javascript">
	var elements = {
		0:{
			"selector":"#drawSurface1 .myDiv1",
			"method":"animate",
			"property":"left",
			"step-start":0,
			"step-end":50,
			"value-start":0,
			"value-end":"eval(elementWidth-100)"
		}
	};
	$(document).ready(function(){
		jQuery('#drawSurface1').isAlive('create',{
			elements:elements
		});
	});
	</script>
</body>
</html>

jQuery以外にeasing.jsにも依存してるようです
elementsオブジェクトに格納されてるデータがキモなんですが、かなりの量の設定できる項目があります。
ので、詳しくはマニュアル見ていただくとして簡単に説明。

「selector」でアニメーションする対象のDOMを選びます。jQueryのセレクタと同じっぽいです。
「method」は、アニメーションだけでなく、CSSに値をセットしたり、class属性を追加・削除できたりします。
「property」で変更する属性を選びます。
「step-start, step-end」はスクロールを初めてからアニメーションが終わるまでの値です。ここをエレメントごとにずらすことでパララックスな動きに。
「value-start, value-end」で初めと終わりの終了値です。この値にしたがってアニメーションします。

これだけ書いても分かりづらいので、ちょっと試してみました。
jquery.isAlive - 遊び場

基本的な動作しか試してませんが、結構簡単にパララックス効果が得られるので楽しいです。
後発のプラグインだけあって設定できる項目も豊富にありますし、動作も軽いです。

ランディングページとかに使うと目を引く出来になるのかなーと思った次第です。

という話

技術ブログにしたい

スクロールでアニメーションを制御できるjQueryプラグイン「jQuery.isAlive」