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

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

sponsors

使用方法

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>

サンプル

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

sponsors

Javascriptサンプルページ一覧
skuare.net