• かちびと.net

    スクロールに応じてパララックス効果を出せるjQueryプラグイン・scrolloramaを使ったプレゼンテーションサンプルのご紹介。派生したプラグインでscrolldeckといいます。今風のサイトやLPOにいいかもですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

スクロールに応じてパララックス効果を出せる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

URL :
TRB :

Ads

Posts

Contact

Services