吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

Plugin : Jarallax

2014年3月5日 / category : jquery, plug-in-jquery

パララックス効果を使ったサイトを制作するときに便利な、Jarallaxというプラグインの使い方を紹介します。
http://www.jarallax.com/

JavaScript
//Jarallaxオブジェクトを生成する
var jarallax = new Jarallax();

まず、Jarallaxオブジェクトを生成し、変数jarallaxに代入します。

JavaScript
/*
@description : setDefault - 初期設定
@param selector : セレクタ
@param values : cssのプロパティを設定する
*/
jarallax.setDefault(selector, values);

ex)
jarallax.setDefault('p', {opacity:'0'});

setDefaultというメソッドが用意されています。これは、初期設定するメソッドですが、CSSファイルのほうで設定すればよいと思いますので、使用する必要はないかな、と思っております。

JavaScript
/*
@description : addAnimation - アニメーションの設定
@param selector : セレクタ
@param array : progressに対するCSSプロパティの値を指定したオブジェクト群の配列
*/
jarallax.addAnimation(selector, array);

ex)
jarallax.addAnimation('#main', [
	{progress:'20%', opacity:'0'},
	{progress:'40%', opacity:'1'},
	{progress:'60%', opacity:'1'},
	{progress:'80%', opacity:'0'}
]);

こちらがこのプラグインのメインになるメソッドです。第二引数の配列に、スクロール量に対し、CSSのプロパティの値がいくらになるかを設定します。
例えば、

[
	{progress:'0%', opacity:'0'},
	{progress:'100%', opacity:'1'},
]

この場合は、スクロール量が0%の時は、透明度が0で、スクロール量が100%の時は、1となる、とい
意味になります。このメソッドさえ覚えれば、実際にパララックス効果を使ったサイトが簡単に作れます。
下記に簡単なデモを紹介します。

DEMO 0

こちらのデモで使用しているbase.jsを見ると少々複雑そうに見えますが、jarallaxの部分だけを見ると使っているメソッドはaddAnimationだけです。
また、jarallaxを使用する場合は、CSSも一緒に指定する必要があります。スクロール量に応じて効果を付けますので、まずはスクロールを出す必要があります。

CSS
#main{
  position: relative;
  width: 100%;
  height: 8000px;
}

jarallax効果を付ける対象の親にあたる要素(id=main)に高さを設定し、スクロールが出るようにします。

CSS
#boxArea div{
  position:absolute;
  opacity: 0;
}

jarallax効果を付ける対象となる要素に、position:absoluteを指定することで、jarallaxの効果が付きます。また、opacity:0を指定し、初期状態を透明度0としています。

下記は、jarallax効果のCSSプロパティを複数指定したデモです。

DEMO 1

動きを見ると、DEMO 0 の場合、フェードイン・アウトでしたが、DEMO 1の場合は、プラス上下の動きが加わっています。複数CSSを指定する場合は、下記のような記述になります。

JavaScript
jarallax.addAnimation(selector, [
	{progress: "0%", opacity:"0", top:'0px'},
	{progress: "100%", opacity:"1", top:'100px'}
]);

もちろん途中経過も2つ以上、設定することが可能です。

JavaScript
jarallax.addAnimation(selector, [
	{progress: "0%", opacity:"0", top:'0px'},
	{progress: "25%", opacity:"0.25", top:'25px'},
	{progress: "50%", opacity:"0.5", top:'50px'},
	{progress: "75%", opacity:"0.75", top:'75px'},
	{progress: "100%", opacity:"1", top:'100px'}
]);

下記は、jarallax効果のCSSプロパティを3つ指定したデモです。

DEMO 2

なかなか面白い動きに発展しそうです。いろいろ試して、使ってみてください。

DownLoad : DEMO DATA