[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax

サイト構築 -JavaScript

Post on:2012年10月17日

Jarallaxのデモ

デモでは、Jarallaxのベーシックなエフェクトから、実際にサイトで使用している例が堪能できます。

Demo 3

スクロールすると、フェードで次々にコンテンツが表示されます。

Demo 2

ドラッグ、マウスホイール、キーボードの各操作にも対応したデモ。

Demo 1

パララックスを一躍有名にした「Nike Better World」を模したデモ。

また、Jarallaxを実際に使用しているサイトも紹介します。

2 GIS

四方八方から手がでてきて、物を置くのが楽しいです。

BIC Deal

かわいいイラストがスクロールに合わせて、次々にスライドします。

Loodsmedia

ディスプレイ内のコンテンツもパララックスします。

Jarallaxの使い方

「Demo 3」を例に、実装方法を簡単に紹介します。

外部ファイル

「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jarallax-0.2.3b.js"></script>

HTML

HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。

<h1 class="logo">Jarallax</h1>
<div class="container" id="slide1">
	<h2>見出し：slide 1</h2>
	<p>テキスト</p>
</div>
<div class="container" id="slide2">
	<h2>見出し：slide 2</h2>
	<p>テキスト</p>
</div>
<div class="container" id="slide3">
	<h2>見出し：slide 3</h2>
	<p>テキスト</p>
</div>
<div class="container" id="slide4">
	<h2>見出し：slide 4</h2>
	<p>テキスト</p>
</div>

JavaScript

アニメーションをエレメントごとに設定し、スクリプトを実行します。

<script type="text/javascript">
var jarallax
init = function() {
  jarallax = new Jarallax(new ControllerScroll(true));
  var currentProgress = 0;
  var progressSteps = 1 / 5;
  
  jarallax.setDefault('.container',{opacity:0, display:'none'})
  
  jarallax.addAnimation('.logo',[{progress:'0', opacity:'1', backgroundPositionY:'50%'},
                                 {progress:'10', opacity:'0', backgroundPositionY:'0%'},
                                 {progress:'100%', opacity:'0', backgroundPositionY:'0%'}]);
                                 
  var animation = jarallax.addAnimation('#slide1',[{progress:'0', display:'block', opacity:'0', top:'100%'},
                                                   {progress:'10', display:'block', opacity:'1', top:'20%'},
                                                   {progress:'20', display:'block', opacity:'0', top:'0%'}]);
                                                   
  jarallax.cloneAnimation('#slide2',{progress:'+10'}, animation);
  jarallax.cloneAnimation('#slide3',{progress:'+20'}, animation);
  jarallax.cloneAnimation('#slide4',{progress:'+30'}, animation);
}
</script>

各エフェクトのトリガーをクリックにすることも可能です。

<ul>
	<li><a href="#" onClick="jarallax.jumpToProgress( 0, 2000, 30);">Intro</a></li>
	<li><a href="#" onClick="jarallax.jumpToProgress( 10, 2000, 30);">New features</a></li>
	<li><a href="#" onClick="jarallax.jumpToProgress( 20, 2000, 30);">Jump to progress</a></li>
	<li><a href="#" onClick="jarallax.jumpToProgress( 30, 2000, 30);">Smooth scrollbar</a></li>
	<li><a href="#" onClick="jarallax.jumpToProgress( 40, 2000, 30);">Clone animations</a></li>
	<li><a href="http://www.jarallax.com/?page=download" >Download version 0.2.2</a></li>
</ul>

実装方法は、動画でも紹介されています。