impress.jsのプレゼンテーションプログラミングインターフェイス

impress.jsは、ブラウザだけで印象的なプレゼンテーションを作成するように設計された人気のあるフレームワークです。 確かに、このブラウザーはCSS3 3d変換をサポートする必要があります。



プレゼンテーションの構築と個々のスライドの表示に関連する瞬間の詳細な分析は、 以前の出版物で実施されました。 その後、私たちの注意を超えて、フレームワークAPIを介してプレゼンテーションを管理する可能性が残っていました。 「 すぐに使える 」 impress.jsの機能がほとんどない場合は、シンプルでコンパクトなAPIを見てみましょう 。



impress.jsフレームワークは 、3次元空間に配置されたスライドからプレゼンテーションを作成するように設計されており、スライドからスライドに移動するときに息をのむような3D変換を提供することを思い出してください。



簡単なプレゼンテーションの例を次に示します。



プレゼンテーション全体がid="impress"



コンテナに配置されます。 一般的なコンテナ内では、個々のスライドのコンテナがマークされ、クラスがマークされています： class="step"



。 スライドの場所は、座標data-x



属性を使用して設定されます： data-x



、 data-y



、 data-z



および回転（傾き）： data-rotate-x



、 data-rotate-y



、 data-rotate-z



。 さらに、各スライドはdata-attribute data-scale



でスケーリングできます。



このようにして作成されたプレゼンテーションは、特殊なキー（ タブ 、 スペース 、 右 矢印、下矢印 、 Page Down）を押すことで完全に前方にスクロールします



戻る、 左 矢印、上矢印 、 Page Upを押す



一定の間隔でスライドの自動ページめくりを整理したり、1つまたは別のスライドへの移行イベントをインターセプトしたり、他の方法でプレゼンテーションの操作の可能性を広げる必要がある場合は、フレームワークAPIを使用する必要があります 。

便利な機能

API関数にアクセスするには、これらの関数を含むオブジェクトを作成する必要があります。

 var api = impress();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、次の機能を使用できます

• api.init()
  
  
  
  ：プレゼンテーションを開始します
• api.next()
  
  
  
  ：プレゼンテーションの次のステップ （ スライド ）に進みます
• api.prev()
  
  
  
  ：プレゼンテーションの前のステップ （ スライド ）に移動します
• api.goto(id)
  
  
  
  ：プレゼンテーションの指定されたステップ （ スライド ）に移動します api.goto(id)
  
  
  
  、ステップ（スライド）番号、またはスライドのDOM要素で移動できます

自動スライド旋盤

たとえば3秒のギャップの後、 スライドを単純に無限にめくる ：

 var interaval=setInterval( function(){ //   api.next      //   3  api.next(); },3000);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プリセットデモタイムを使用した1回限りのスライドフリック

 var step_transitions=[ {slide: 1, duration: 3500}, {slide: 2, duration: 3000}, {slide: 3, duration: 2500}, {slide: 4, duration: 2000}, {slide: 5, duration: 1500}, {slide: 6, duration: 1000}, {slide: 7, duration: 500}, ] var time_frame=0; step_transitions.filter(function(steps){ time_frame = time_frame + steps.duration; setTimeout(function(){ api.goto(steps.slide); }, time_frame); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベント処理

JavaScriptプログラミングでは、プログラムの進行を制御する便利な手段としてイベントハンドラーを使用します。 impress.jsフレームワークでは、2種類の特別なイベントを処理できます 。

1. stepenter-新しいスライド（ステップ）への移行の瞬間に発生します
2. stepleave-次のスライドを離れる瞬間に発生します（ステップ）

簡単な例では 、残すスライドに関するメッセージと、切り替え先のスライドに関するメッセージが表示されます。

 document.addEventListener('impress:stepenter', function(event){ alert( '  : ' + event.target.id ); }, false); document.addEventListener('impress:stepleave', function(event){ alert( ' : ' + event.target.id ); }, false);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

impress.jsプレゼンテーションをプログラミングするための簡単なツールキット全体を次に示します。

• 4つの関数： init（） 、 next（） 、 prev（） 、 goto（id） ;
• 2つのイベント： stepenter 、 stepleave 。

ただし、スライドからスライドに移動するときに、スライダーを作成するか、追加のアクションを実行するだけで十分です。