3Dちっくにカッコよく全画面スライドさせられるJavaScript「Kontext」

3Dちっくにカッコよく全画面スライドさせられるJavaScript「Kontext」サンプル MACでプレゼンをしている人を見ているとその動きに思わず自分もMACを欲しくなる人いませんか。
ちょっと待って、購入ボタンを押す前に、Windowsでもかっこ良く全画面をスライドさせられるJavaScript「hakimel/kontext」を試してみませんか。
スライド間の切り替えをかっこよく3Dぽくしてくれます。

使用方法 hakimel/kontextからファイル一式をダウンロードし、JavaScriptとCSSを下記のように記述します。
<link rel="stylesheet" href="kontext.css">
<link rel="stylesheet" href="demo.css">
<script type="text/javascript" src="kontext.js"></script>

次にスライドを以下のルールで書きます。
<article class="kontext">
<div class="layer one show">
スライド1
<!-- showの記述があると最初に表示される -->
</div>
<div class="layer two">
スライド2
</div>
<!-- 以下スライド分 -->
</article>
<!-- ページ数が何枚か、現在どこのページがを表示する -->
<ul class="bullets"></ul>

最後にJavaScriptを書いて完成です。
<script src="kontext.js"></script>
<script>
var k = kontext( document.querySelector( '.kontext' ) );
var bulletsContainer = document.body.querySelector( '.bullets' );

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 );
}

k.changed.add( function( layer, index ) {
var bullets = document.body.querySelectorAll( '.bullets li' );
for( var i = 0, len = bullets.length; i < len; i++ ) {
bullets[i].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[0].clientX;
}, false );

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

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

</script>

キーボードの右・左でも切り替え可能です。

3Dちっくにカッコよく全画面スライドさせられるJavaScript「Kontext」サンプル

sponsors

「3Dちっくにカッコよく全画面スライドさせられるJavaScript「Kontext」」をシェアする

記事作成:
記事URL:

TOP > > 3Dちっくにカッコよく全画面スライドさせられるJavaScript「Kontext」