[JS]アニメーションが気持ちいい！複数のパネルをiOS風のエフェクトで切り替える -Kontext

サイト構築 -JavaScript

Post on:2013年2月28日

sponsorsr

CSSの3Dアニメーションを使った、iPhone, iPadアプリで見かけるパネル切替のエフェクトをウェブページに実装するスクリプトを紹介します、

Kontext -GitHub

Kontextのデモ
Kontextの使い方

Kontextのデモ

デモでは3枚のパネルをダイナミックなアニメーションで切り替えます。
操作は、下部のナビゲーションとキーボードの矢印キーに対応しています。

Kontext -デモページ

Kontextの使い方

スクリプトは単体で動作するので、jQueryなどは必要はありません。

Step 1: 外部ファイル

当スタイルシートをhead内に、スクリプトを<body>の上に外部ファイルとして記述します。

<head>
	<link rel="stylesheet" href="css/kontext.css">
	<link rel="stylesheet" href="css/demo.css">
</head>
<body>
...
...
	<script src="js/kontext.js"></script>
</body>

Step 2: HTML

各パネルはdiv要素で実装し、その下に切替用のナビゲーションを配置します。
各パネル内には自由にエレメントを配置できます。

<article class="kontext">
	<div class="layer one show">
		<h2>パネル 1</h2>
	</div>
	<div class="layer two">
		<h2>パネル 2</h2>
	</div>
	<div class="layer three">
		<h2>パネル 3</h2>
	</div>
</article>
<ul class="bullets"></ul>

Step 3: JavaScript

外部スクリプトの下に、下記のスクリプトを記述します。
少し長いのは、ナビゲーションの挙動を設定しているためです。

<script>
	var k = kontext( document.querySelector( '.kontext' ) );

	var bulletsContainer = document.body.querySelector( '.bullets' );

// Create one bullet per layer
for( var i = 0, len = k.getTotal(); i < len; i++ ) {
	var bullet = document.createElement( 'li' );
	bullet.className = i === 0 ? 'active' : '';
	bullet.setAttribute( 'index', i );
	bullet.onclick = function( event ) { k.show( event.target.getAttribute( 'index' ) ) };
	bullet.ontouchstart = function( event ) { k.show( event.target.getAttribute( 'index' ) ) };
	bulletsContainer.appendChild( bullet );
}

// Update the bullets when the layer changes
k.changed.add( function( layer, index ) {
	var bullets = document.body.querySelectorAll( '.bullets li' );
	for( var i = 0, len = bullets.length; i < len; i++ ) {
		bullets&#91;i&#93;.className = i === index ? 'active' : '';
	}
} );

document.addEventListener( 'keyup', function( event ) {
	if( event.keyCode === 37 ) k.prev();
	if( event.keyCode === 39 ) k.next();
}, false );

var touchX = 0;
var touchConsumed = false;

document.addEventListener( 'touchstart', function( event ) {
	touchConsumed = false;
	lastX = event.touches&#91;0&#93;.clientX;
}, false );

document.addEventListener( 'touchmove', function( event ) {
	event.preventDefault();

	if( !touchConsumed ) {
		if( event.touches&#91;0&#93;.clientX > lastX + 10 ) {
			k.prev();
			touchConsumed = true;
		}
		else if( event.touches[0].clientX < lastX - 10 ) {
			k.next();
			touchConsumed = true;
		}
	}
}, false );
</script>