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(){
プリセットデモタイムを使用した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種類の特別なイベントを処理でき
ます 。
- stepenter-新しいスライド（ステップ）への移行の瞬間に発生します
- 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 。
ただし、スライドからスライドに移動するときに、スライダーを作成するか、追加のアクションを実行するだけで十分です。