パララックス効果を再現するjQueryプラグイン「jquery.parallax」

  • このエントリーをはてなブックマークに追加

仕事でパララックス効果を使ったサイト作る機会があり、
使い勝手のいいプラグインないかなぁーと思って探していたのですが。
なかなか見つかりませんでした・・。

パララックスの仕組みってそれほど難しくないんだねぇーと思いながら作り始めたのですが・・。

なかなかいろいろな機能を組み込みだすとなかなか大変な感じで;
結構前に作った奴は自分だけ使えればいいやーと思い、プラグイン化していなかったのですが、最近ようやくプラグイン化しました。

もしよければ使ってみてください!


仕様

3つのタイプでparallaxサイトを実装できます。

  1. startからendの位置までの距離をfromStyleからtoStyleまでのstyleでeasingの種類にそって実行する。
  2. styleをスクロール量 / speedででコンテンツを動かす。
  3. 指定した位置を通過したときに関数を実行する。

使い方

<script src="js/jquery.js"></script>
<script src="js/jquery.parallax.js"></script>

オプション

初期設定

parallax : {},
		
direction : 'y',

// parallax Type
type : 'type1',

//type2
style : 'top',
fixPosition : 0,
speed : 1,
minValue : -999999999999,
maxValue : 999999999999,
adjustment : 0,

// type3
contentStartLinePercent : 50,
startAnimation : '',
endAnimation : ''
parallax
typeによってそれに合わせた内容を指定(ここの説明はあとで書いています。)
direction
y or x スクロールの方向を指定
type
parallaxのタイプの設定
  • type1 - startのendの位置までの距離をfromStyleからtoStyleまでのstyleでeasingにそって実行する。
  • type2 - styleをスクロール量 / speedででコンテンツを動かす。
  • type3 - 指定した位置を通過したときに関数を実行する。

type2で使うoption

style
どのCSSに対して処理を行うか
fixPosition
スクロール位置がどの位置にフィックスした時に画像の位置を意図した位置に持ってきたいか
speed
スクロール量に合わせてどのぐらいの量で動かしたいか(Y / speed)
minValue
最低の値はどのぐらいか
maxValue
最高の値はどのぐらいか
adjustment
背景などの位置をフィックスさせたい位置は0からどれぐらいずれているか

type3で使うoption

contentStartLinePercent
コンテンツが動き始めるラインを、windowの高さの割合で指定(起点は上から)真ん中の場合は50
startAnimation
contentStartLineを上から下に向かって通過した時に実行する関数(アニメーション)
endAnimation
contentStartLineを下から上に向かって通過した時に実行する関数(アニメーション)
fixPosition
contentStartLineがこの位置に来た時点で関数を実行、もし指定がない場合はparallaxに指定したoffsetの情報がラインになる

typeに合わせたparallaxの指定

type1

下記のような連想配列を渡す

parallaxObj = {
	name : {
		obj : $('#header'), // 動かすオブジェクト
		tagMotions : {
			motion1 : [{
				start : 1000, // 動き初めのスクロール位置
				end : 1500, // 動きが終るスクロール位置
				fromStyle : {
					left : {Number}
				},
				toStyle : {
					left : {Number}
				},
				easing : 'easeInOutElastic' // イージングの指定(種類はjQuery Easing - jQuery 日本語リファレンスから選択してください。)
			},
			{
				start : 1300, // 動き初めのスクロール位置
				end : 1500, // 動きが終るスクロール位置
				fromStyle : {
					opacity : 1
				},
				toStyle : {
					opacity : 0.5
				},
				easing : 'liner' // イージングの指定
			}],
			motion2 : [{
				//モーションいくつでも指定可能
				//(ただしmotion1で指定している一番大きいendより、motion2のstartは大きくなるようにしてください。)
				....
			}]
		};
	};
};

$(window).parallax({
	parallax : parallaxObj
});

type2

動かしたいコンテンツを直接指定

$(window).parallax({
	parallax : $('#type2'),
	type : 'type2',
	style : 'background-positionTop',
	fixPosition : $('#type2').offset().top,
	speed : -2,
	maxPosition : 0,
	adjustment : -200,
	contentStartLinePercent: 50
});

type3

基準となるタグのトップの位置($(hoge).offset().top)のタグ($(hoge))を指定
もしくはstartAnimation、endAnimationの引数targetに指定したいタグ

$(window).parallax({
	parallax : $('#type3'),
	type : 'type3',
	fixPosition : $('#type3').offset().top, //もしもfixPositionがある場合はparallaxで指定したタグのoffset().topの値よりもfixPositionが優先されます。
	startAnimation: function(e){showAnimate(e);}, //eにはparallaxで指定したタグがe.targetで取れます。
	endAnimation: function(e){hideAnimate(e);},
	contentStartLinePercent: 30
});

ちょっと説明だけだと文章力がないせいかわかりづらくなってしまう;

DEMOなどを見つつお役に立てれば幸いです。。時間あるときにでも実際の作る手順をつくろうかなと思ってます。

使い方などわかりづらい部分があるかと思いますので、実際使う方がいらっしゃいましたら質問いつでもどうぞです。また使い勝手悪い部分などもあるかと思いますので、ご指摘いただけると助かります。

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/95

このページの先頭へ戻る