[JS]このアニメーションはかなりカワイイ！折り畳んだ紙をパタパタ広げるスクリプト -PFold

サイト構築 -JavaScript

Post on:2012年10月19日

PFoldのデモ

デモは3つあります。
まずは、Demo 1で、その折り畳みをステップごとに紹介します。

Demo 1

小さく折り畳まれたエレメントをクリックして、スタートです。

最初の展開です。
最終的な大きさになるまで、一気にアニメーションします。
※キャプチャするのが大変でしたｗ

さらに、展開。

最終的な大きさになりました。
この大きさで、3つの折り畳みです。

Demo 2は、配置によって折り畳む方向が異なるものです。

Demo 2

初期状態。

4つのエレメントは、グリッドからはみ出ないように展開します。

Demo 3はDemo 2と同様ですが、最終的なポジションを変更します。

Demo 3

初期状態。

展開と共に、移動のアニメーションが加わります。

PFoldの使い方

Step 1: 外部ファイル

「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。

<link rel="stylesheet" type="text/css" href="css/pfold.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pfold.js"></script>

Step 2: HTML

コンテンツの初期状態と最終状態をそれぞれdiv要素で実装し、div要素で内包します。

<div id="uc-container" class="uc-container">
	<div class="uc-initial-content">
		<!-- コンテンツの初期状態 -->
	</div>
	<div class="uc-final-content">
		<!-- コンテンツの最終状態 -->
	</div>
</div>

Step 3: JavaScript

ラッパーをjQueryのセレクタで指定し、スクリプトを実行します。

$( '#uc-container' ).pfold();

スクリプトのオプション

オプションでは折り畳みのアニメーションやコンテナの扱いを設定できます。

$.PFold.defaults = {
	// 奥行きの値
	perspective : 1200,

	// 折り畳むスピード
	speed : 450,

	// 折り畳みのアニメーション
	easing : 'linear',

	// 折り畳みのステップの遅延(ms)
	folddelay : 0,

	// 折り畳みの数
	folds : 2,

	// 展開時のそれぞれの方向
	folddirection : ['right','top'],

	// 折り畳み時のシャドウの有無
	overlays : true,

	// メインのコンテナの動き
	centered : false,

	// コンテナの移動のスピード
	containerSpeedFactor : 1,

	// コンテナのアニメーション
	containerEasing : 'linear',

	// コールバック関数
	onEndFolding : function() { return false; },
	onEndUnfolding : function() { return false; }
};