impressマスク(PPT)フレームワーク

5230 ワード

开源中国コミュニティの中で1篇の文章を见て、述べたのは《6つの最も良いHTML 5/CSS 3がフレームワークを隠す》で、それからネット上で対応して探して、impressを使う人が比较的に多いことを発见して、そのため、私もやってみて、効果は确かにとても震撼して、効果を见てクリックして、以下はあなたにimpressのコードの过程を详しく绍介します:
Impress.jsは、オンラインプレゼンテーションを作成するためのjavascriptライブラリですが、実際のプロジェクトページにはドキュメントが記載されていません.このガイドは簡単なスライドショーを開始して作成するのに役立ちますが、完成したら覚えておいてください.それを使うのはこれに限らず、唯一の制限はあなたの創造力です.
必須条件
有効なチュートリアルを見たい場合は、Google ChromeまたはSafari(またはFirefox 10またはIE 10)を使用します.Impress.jsは現在、以前のバージョンのFirefoxまたはInternet Explorerと互換性がありません.
コンフィギュレーション
最も重要なことはあなたが新しいページを作成することです.私のはindexです.htmlには基本的なheadとbody要素が配置されています.


       Impress Tutorial

body要素が終了する前にimpressを導入する.jsファイル、これはImpressパッケージがあなたのプロジェクトに導入されました.
(BODYに入れるのが望ましい)
次に、単純なidを「impress」

要素とするwrapperを含むスライドを作成します.

スライドの作成
新しいスライドを作成するのがどれだけ簡単かを見ることができます.各スライドは、wrapper内の

要素であり、class名は「step」と呼ばれます.

My first slide

簡単なスライドを作成しますが、スライドにデータ属性を追加し始めたときは面白いです.データ・プロパティは、アクティブなスライドではない場合のスライドのプロパティを示します.次のデータ・プロパティを使用できます.

data-x=スライドのx座標

data-y=スライドのy座標

data-scale=値を指定してスケールします.data-scaleが5の場合、スライドの元のサイズの5倍

に拡大します.

data-rotate=スライド

を回転する数値の度数で決定

data-rotate-x=3 D用で、この数字の度数はx軸に対して何度回転すべきかです.(前傾/後仰)

data-rotate-y=は3 D用で、この数字の度数はy軸に対して何度回転すべきかです.(左振り/右振り)

data-rotate-z=は3 D用で、この数字の度数はz軸に対して何度回転すべきかです.

アクションのデータ属性
次のスライド設定では、各アクションのデータ属性を説明します.
最初のスライドから始めましょう.このスライドは、独自のxおよびyデータ属性を0に設定しているので、ページの真ん中に表示されます.

This is myfirst slide

2番目のスライドのx値は500ですが、y値は0です.これは、アクティブなときにx軸(左にスライド)500 pxを通る場所に現れることを意味します.

This is slide 2

簡単でしょう?次のスライドは、2番目のスライドと同じx位置から始まりますが、y位置は-400で、上部400 pxからスライドします.

This is slide 3

スライド4は、スケーリング値を使用して、1つのスライドがどのように拡大縮小されるかを表示します.そのscale値は0.5で、半分のサイズであるべきであることを意味します.アクティブなプレゼンテーションになると、必要な倍数ですべてのスライドのスケールサイズが調整されます.この例では、このスライドは正常に表示されるべきであり(割合は1)、2倍(0.5*2=1)に拡大する必要があり、他のすべてのスライドも2倍に拡大して2倍のサイズになります.

This is slide 4

回転アトリビュートを使用すると、現在のビューにスライドを回転させ、スライド5を50度回転させるように設定できます.

This is slide 5and it rotates in.

最後に、3 D変換では、各次元の軸に回転プロパティ(x,y,z)を指定できます.
x軸は横軸で、物事を傾ける(正の値)か後ろ(負の値)を意味し、y軸は縦軸なので、物事を左に振る(負の値)か右に振る(正の値)、z軸は縦軸で、これは回転するものが上(負の値)と下(正の値)になります.
コンポジット
スライドショーにアニメーション効果を追加する必要があるすべてのデータ属性を理解し、想像力で不思議で驚くべき方法でこれらの効果を統合して、自分のスライドショースタイルを作成することができます.

This is slide 7 and it has a 3D transition AND a scale.

サポートされていないブラウザ
Impressはブラウザがサポートされているかどうかを自動的に検出し、サポートされていない場合はwrapper「

」にスタイル名「impress-not-supported」のスタイルを自動的に追加し、一部のcssを使用してブラウザにImpressがサポートされていない情報を表示できます.
開始した

に次の内容を追加します.

Your browserdoesn't support impress.js. Try Chrome or Safari.

次に、スタイルシートを作成するか、既存のスタイルシートを導入します.
.no-support-message { display:none; }
.impress-not-supported .no-support-message {display:block; };
デフォルトではメッセージは非表示ですが、ブラウザがサポートされていない場合、現在のスタイルはimpress-not-supportedになります.
楽しんでね!
このチュートリアルでは、Impressの使用について説明します.jsは、独自のオンラインプレゼンテーションの基本資料を作成します.例全体をGitHubでダウンロードしてプレゼンテーションできます.
次に、完全な例を示します.

<html>
 <head>
  <title>impress  </title>
  <meta http-equiv="Content-Type" content="text/html; charset=GBK">
 
 </head>

 <body style="font-size:20px;">
  <script src="js/impress.js"></script>
  <div id="impress">

  <div class="step" data-x="0" data-y="0">
         x y       0，           
</div>
<div class="step" data-x="500" data-y="0">
    x  500， y  0，                   x (    )500px   
</div>
<div class="step" data-x="500" data-y="-400">
       2       x    ，  y   -400，       400px   
</div>
<div class="step" data-x="500" data-y="-800" data-scale="0.5">
      scale  0.5，            
</div>
<div class="step" data-x="0" data-y="-800" data-rotate="90">
        50 
</div>
<div class="step" data-x="-2600" data-y="-800" dataimpress-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4">
                    
</div>
</div>
 </body>
</html>

そのソースコードはここをクリックしてダウンロードすることができます!!!

HTML 5デスクトップアラート機能の開発

[解読ウィジェット]生活ツール集合