iOS風の全画面スライドパネルの切り替えを実装「kontext」
当ページのリンクには広告が含まれています。
スポンサーリンク
iOS風の全画面スライドパネルの切り替えを実装するプラグイン「kontext」を紹介します。
jQueryプラグイン「kontext」
このプラグインを使えば、かっこいい！アニメ効果でスライドを切り替えることができます。全画面パネルなので、スライドショーや紙芝居のような使い方もできそうですね。
js部分もひな形が用意されているので、カスタマイズも簡単にできそうです。
スポンサーリンク
それではデモページをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="kontext のデモでーす。">
<title>kontext - jQuery Plugin Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/kontext.css">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<article class="kontext">
<div class="layer one show">
<h2>Kontext のデモでーす。</h2>
<p>キーボードの左右「矢印」キーを押す、あるいは下の方にあるボタンをクリックしてみてください。</p>
<p><a href="https://webkaru.net/jquery-plugin/kontext/">「jQueryプラグインまとめ」に戻る</a></p>
</div>
<div class="layer two">
<p>むかしむかしあるところに…</p>
</div>
<div class="layer three">
<p>おじいさんとおばあさんが…</p>
</div>
<div class="layer four">
<p>いたよ。</p>
<p>完。</p>
</div>
</article>
<ul class="bullets"></ul>
<script src="js/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>
</body>
</html>
スポンサーリンク