スクロールに応じてパララックス効果を出せるjQueryプラグイン・scrolloramaを使ったプレゼンテーションサンプル

あけましておめでとう御座います。
今年も何卒宜しくお願い致します。
さて、新年初記事です。正月の間
にパララックス効果を出せるjQuery
プラグインを見かけたんですが、
その派生のプレゼンが良かったので
メモ。

スクロールに応じて様々なエフェクトをclassを指定するだけで実装できるjQueryプラグイン、scrolloramaを使ったプレゼンサンプルです。

scrolldeck

スクロールすれば左右からコンテンツが出てきたりフェードインしたりします。

サンプルです。

Sample

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
	<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="js/jquery.scrollorama.js"></script>
	<script src="js/jquery.scrolldeck.js"></script>

ちょっと読むコード多いですね。

<script>
	$(document).ready(function() {
		var deck = new $.scrolldeck({
			buttons: '.nav-button',
			easing: 'easeInOutExpo'
		});
	});
</script>

上部ナビゲーションの設定もして用意はOK。次はマークアップです。

普通にマークアップしていくんですが、要素に対し、スクロールに応じてエフェクトを追加するにはclass等をつければいいだけです。

例えば

<p>テキスト 
<strong class="animate-in" data-animation="space-in">アニメーション・イン</strong> 
テキスト</p>

このように、class=”animate-in”、data-animation=”space-in”を与えることでスクロールに応じたエフェクトを実装できます。この場合はアニメーションしながら表示されます。

<span class="or-block animate-in" data-animation="fly-in-left">
	左から出てくるぜー
</span>

これなら左から出現される。右ならdata-animation=”fly-in-right”とすればOK。

<ul>
	<li class="animate-build" data-build="1">リスト01</li>
	<li class="animate-build" data-build="2">リスト02</li>
	<li class="animate-build" data-build="3">リスト03</li>
	<li class="animate-build" data-build="4">リスト04</li>
	<li class="animate-build" data-build="5">リスト05</li>
</ul>

グループ化して1つずつ表示させます。

HTML5のdate-属性は本当利便性高いですね。date属性はDOM 要素に任意の値をセットできる独自データ属性です。
(参照：グローバル属性 – HTML5 タグリファレンス)
jQueryとかですと.data()を使います。スマフォサイトなんかでは利用頻度が高くなりそうなので使い方も合わせて勉強すると後で良い事あるかもですよ。

ちょっと余談入りましたが、プレゼンのサンプルは以下で手に入ります。

scrolldeck