ホームページ > 記事 > ウェブフロントエンド > Impress.js を使ってみる

Impress.js を使ってみる

WBOYオリジナル: 2016-06-24 11:48:151540ブラウズ

前書き:

PPT を使用してパスを設定し、時間を設定し、アニメーションの特殊効果を作成するためにアニメーションメソッドを設定することにうんざりしている場合、Impress.js は非常に良い選択となるでしょう。

それで作成されたPPTはより直感的で、効果も美しいものになります。

もちろん、Xをインストールするために使用するには、ある程度の料金を支払う必要がありますが、フロントエンド愛好家でHTML/CSSを理解している場合は問題ありません。

インターネット上の例を見て、自分で練習すれば、数分で始めることができます。

概要:

　　impress.js 是国外一位开发者受 Prezi 启发，采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。　　现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具，但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同时，也支持传统 PowerPoint 形式的幻灯演示。　　目前 impress.js 是基于 webkit 浏览器（Chrome、Safari）开发，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的浏览器也能正常运行。

デモ:

公式 Web サイトの表示効果: http://bartaz.github.io/impress.js/# /概要

最初のものmade by me 例：http://guyingsoft.com/gyPage/About/index.html

携帯電話では方向キー（←/→）やTabキーを使用して再生するため、一時的に再生できない場合があります。再生を切り替えます。

公式サイトのエフェクトデモに付属するImpress.jsのソースコードは、以下のダウンロードアドレスからダウンロードできます。

上記の例が必要な場合は、メールにメッセージを残していただいても大丈夫です。

準備:

Impress.js のソースコードは GitHub で公開されており、https://github.com/bartaz/impress.js からダウンロードできます。
ブラウザ: Chrome、Safari、FireFox、IE10 (機能しないという人もいますが、理由はわかりません)。
コードエディター (ここでは WebStorm を使用します)。

OK、すべての準備が整ったので、始めましょう

ステップごとに手順を進めていけば、impress.js の使い方がすぐに理解できます。

ステップ 1:

36cc49f0c466276486e50c850b7e4956 の終わりの前に、上記でダウンロードした impress.js を導入します
最初の 1 つのクラスは "impress-not-supported" で、プロンプトメッセージがサポートされていないことを意味します。もう 1 つは、ID が "impress" であり、スライドのコンテナーを意味します。ここに ID があることに注意してください。最初にプレイを開始したとき、Impress はモニターが見つからないなどのエラーメッセージを報告し続けました。

 1 <!DOCTYPE html> 2 <html> 3 <head lang="zh"> 4     <meta charset="UTF-8"> 5     <title>Impress.js Demo - 孤影</title> 6 </head> 7 <body> 8     <div class="impress-not-supported"></div> 9 10     <div id="impress"></div>11 12     <script type="text/javascript" src="impress.js"></script>13 </body>14 </html>

ステップ 2:

次に、各スイッチングステップを作成します。

これらのステップのdivをimpressのidのdivに作成するだけです。divのクラスは「step」です。

divのidは任意です。idがない場合は、デフォルトのステップ順で上から順に実行されます。アクセスアドレスは「http://.../」のようになります。デモ.html#/step-1」。それ以外の場合は、カスタマイズされた ID の順序で実行されます。

各スライドの位置やサイズ、切り替え効果などの属性は以下の通りです。

data-x: スライドのX座標

data-y: スライドのY座標

data-scale: スライドスライド表示のズーム率

data-rotate: スライドの回転度

data-rotate-x: 3D 使用の場合、この度合いは X 軸に対してどれだけ回転するかを設定します。

data-rotate-y: 3D で使用する場合、この角度は Y 軸を基準にしてどれだけ回転するかを設定します。

data-rotate-z: 3D 使用の場合、この度は Z 軸を中心に回転する量を設定します。

これらの属性を理解した後、次のコードの作成を開始します。ここではスライドコンテンツに歌詞を使用します。

1. impress.js コードを参照した後、それを使用してページを初期化し、生成する必要があります。制作効果、コードは次のとおりです:

rrree

2. 最初の初期スライドを作成し、data-x と data-y を 0 に設定して、スライドの中央に表示されます。ページ:

<1--  引入impress.js  --><script type="text/javascript" src="impress.js"></script><script type="text/javascript">    impress().init();　　// 初始化幻灯片的step</script>

3. 2 番目のスライドを作成します。その data-x は 500 で、data-y はまだ 0 なので、2 番目のスライドに切り替えると、右にパンしてこのスライドに切り替わります。 :

<div class="step" data-x="0" data-y="0">    <h3>《Poker Face》</h3> - Lady Gaga</div>

4. 以下の 3 番目のスライドを作成します。その data-x はまだ 500 で、data-y は -400 なので、400px にパンして、次のように切り替えます。パン効果は面白くないと感じますか? 4 番目のスライドでいくつかのトリックを実行してみましょう:

ここでは、data-scale を 0.5 に設定します。つまり、data-x は元のサイズの半分であり、data-y は 500 です。 -800です。

400px上に移動し、半分のサイズに拡大縮小することを表します。コードは次のとおりです:

<div class="step" data-x="500" data-y="0">    I wanna hold them like they do in Texas Plays.</div>

5. 5 番目のスライドでは、data-rotate 属性を使用して回転アニメーションを設定します。

ここでは、現在のdata-xを0、data-yを-800のまま、data-rotateを90に設定します。

　　表示，它将会安装旋转90°的动画，想左翻转500px，显示当前幻灯片，代码如下：

<div class="step" data-x="0" data-y="-800" data-rotate="90">    Love game intuition play the cards with Spades to start.</div>

　　6.下面来点儿终极的，设置data-x为-1200，data-y为0，表示当前幻灯片相对于前一张向左1200px向下800px。

　　然后分别使用data-rotate-x、data-rotate-y、data-rotate-z设置旋转角度，并且使用data-scale设置缩放比例为放大4倍。

　　代码如下：

<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">    And after he's been hooked I'll play the on that's on his heart.</div>

　　7.现在你已经可以打开浏览器运行代码了，是不是感觉效果相当霸气。

　　当然，界面可能有点丑，你可以按照个人喜好写点样式。如果懒得写的话，也可以使用下面我简单些的几个样式：

    <style type="text/css">        body{margin:0px; background:#000000; color:#00FF66; font-size: 20px;}        div.step h3{display: inline-block;}        div.step{                 width:400px; height: 100px; padding-top: 50px;                  text-align: center; border:1px solid #00FF66;                  box-shadow: 0px 0px 10px #00FF66; border-radius: 20px;        }        div#overview{border:0px; box-shadow:0px 0px 0px transparent; }    </style>

　　OK、通过以上7个小步骤，我们就已经完成了一张简单粗暴的演示文稿了。

　　你也就可以发挥自己独特的想象力来动手制作一个吓尿一片人的Web演示文稿的展示效果了。

附注：

　　这里还有一个全局预览的效果，就是把所有step块的的内容全部放在一个平面显示，效果超赞。

　　在这里，我在所有step后面创建一个id为overview的div，作为整体预览的展示块，展示缩放大小为放大3倍，x和y的位置如下等代码如下：

<div class="step" id="overview" data-x="-200" data-y="-500" data-scale="3"></div>

结尾：

　　本实例所有代码如下：

 1  2  3  4      5     Impress.js Demo - 孤影 6     12 13 14     
15 16     17         《Poker Face》
 - Lady Gaga
18         I wanna hold them like they do in Texas Plays.
19         Fold them let them hit me raise it Baby stay with me..
20         (I love it.)
21         Love game intuition play the cards with Spades to start.
22         23             And after he's been hooked I'll play the on that's on his heart.24         
25         <div class="step" id="overview" data-x="-200" data-y="-500" data-scale="3"></div>26     
27 28     29     32 33

　　如果还需要再看看开头我做的那个演示实例的话，留言邮箱吧。

　　当你制作出这么一个简单的演示文稿后，你应该记住，使用它制作出的效果如何，你的想象和创造力是唯一决定性的因素！

体会：

　　正因为我们是前端，所以用前端技术做做各种尝试没什么不好，impress更可以让我们的演示文稿更有新意，所以简单了解下绝对是值得的，学习是最好的投资。　　优点：

个人非常喜欢overview的功能
因为HTML+CSS都需要自己完成，位置和效果都得自己经手，视觉效果都由自己掌控
在我用过的同类产品中视觉效果最绚，CSS3+3D效果，直接给观众看晕:)

　　缺点：

impress在视觉表现上确实非常强大，比起同样做演示文稿的 html5slides 和 deck.js， impress.js的复杂度上高了不少，而且如果想把演示文稿排版的好看可能需要花掉大量的时间.
*如果闲impress麻烦的朋友可以去看看 html5slides 和 deck.js的资料，视觉效果会稍差一些，不过上手会简单不少。
不要把3D和旋转用得太花哨、太绚，看的人会晕，恰当就好哈

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：サーブレット learning_html/css_WEB-ITnose次の記事：サーブレット learning_html/css_WEB-ITnose

続きを見る

Impress.js を使ってみる

前書き:

概要:

デモ:

準備:

ステップ 1:

次に、各スイッチング ステップを作成します。

附注：

结尾：

《Poker Face》

体会：

関連記事

次に、各スイッチングステップを作成します。