前言：
如果你已經厭倦了使用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 的瀏覽器也能正常運行。
演示：
- 官網展示效果：http://bartaz.github.io/impress.js/#/overview
- 本人制作的第一個示例：http://guyingsoft.com/gyPage/About/index.html
手機暫時可能看不了，因為它是使用方向鍵(←/→)或Tab鍵切換播放的。
從下面的下載地址即可下載Impress.js的源碼，里面附帶了官網的效果Demo。
如果需要上面我做的那個例子，留言郵箱就OK了。
准備：
- Impress.js的源碼已經發布在了GitHub上，下載即可：https://github.com/bartaz/impress.js。
- 瀏覽器：Chrome、Safari、FireFox、IE10(有的人說不行，不知道為什么)。
- 代碼編輯器(在這里我用的是WebStorm)。
OK、一切准備就緒，開搞、
大家一步一步跟着寫，impress.js怎么用就會秒懂了。
步驟一：
- 新建一個HTML頁面，在</body>結束之前引入上面下載的impress.js
- 在<body>中創建兩個div：
第一個class為“impress-not-supported”，表示不支持是的提示信息，你懂的；
另一個的id為“impress”，表示幻燈片的容器。注意這里是id，我剛玩的時候就寫成了class，結果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>
步驟二：
現在我們就要來創建每一個切換的步驟了。
在id為impress的div中創建這些要切換的步驟的div即可，div的class為“step”。
div的id可有可無，如果沒有id，則會按照默認從上向下的step的順序一步步執行，訪問地址如：“http://.../demo.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軸旋轉多少度。
OK、了解了這些屬性之后，我們開始創建如下代碼，幻燈片內容在這里我就用歌詞了：
1.引用impress.js代碼之后，我們需要使用它來初始化頁面，產生后面我們將要制作的效果，代碼如下：
<1-- 引入impress.js -->
<script type="text/javascript" src="impress.js"></script> <script type="text/javascript"> impress().init(); // 初始化幻燈片的step </script>
2.創建第一個初始的幻燈片，他的data-x和data-y都設置為0，所以它會出現在頁面的中間：
<div class="step" data-x="0" data-y="0"> <h3>《Poker Face》</h3> - Lady Gaga </div>
3.我們創建第二個幻燈片，它的data-x為500，data-y依舊為0，所以切換到第二的時候，它會向右平移切換到這個幻燈片：
<div class="step" data-x="500" data-y="0"> I wanna hold them like they do in Texas Plays. </div>
4.下面創建第三個幻燈片，它的data-x依舊為500，data-y為-400，所以它會向上平移400px切換至此：
<div class="step" data-x="500" data-y="-400"> Fold them let them hit me raise it Baby stay with me. </div>
4.平移的效果是不是感覺沒什么意思？下面我們第四張幻燈片來點兒花樣：
使用data-scale控制縮放的大小，在這里我設置為0.5，表示縮放為原大小的一半；data-x依舊500，data-y為-800。
表示向上移動400px，並且縮放一半的大小，代碼如下：
<div class="step" data-x="500" data-y="-800" data-scale="0.5"> (I love it.) </div>
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 <!DOCTYPE html> 2 <html> 3 <head lang="zh"> 4 <meta charset="UTF-8"> 5 <title>Impress.js Demo - 孤影</title> 6 <style type="text/css"> 7 body{margin:0px; background:#000000; color:#00FF66; font-size: 20px;} 8 div.step h3{display: inline-block;} 9 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;} 10 div#overview{border:0px; box-shadow:0px 0px 0px transparent; } 11 </style> 12 </head> 13 <body> 14 <div class="impress-not-supported"></div> 15 16 <div id="impress"> 17 <div class="step" data-x="0" data-y="0"><h3>《Poker Face》</h3> - Lady Gaga</div> 18 <div class="step" data-x="500" data-y="0">I wanna hold them like they do in Texas Plays.</div> 19 <div class="step" data-x="500" data-y="-400">Fold them let them hit me raise it Baby stay with me..</div> 20 <div class="step" data-x="500" data-y="-800" data-scale="0.5">(I love it.)</div> 21 <div class="step" data-x="0" data-y="-800" data-rotate="90">Love game intuition play the cards with Spades to start.</div> 22 <div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4"> 23 And after he's been hooked I'll play the on that's on his heart. 24 </div> 25 <div class="step" id="overview" data-x="-200" data-y="-500" data-scale="3"></div> 26 </div> 27 28 <script type="text/javascript" src="impress.js"></script> 29 <script type="text/javascript"> 30 impress().init(); 31 </script> 32 </body> 33 </html>
如果還需要再看看開頭我做的那個演示實例的話，留言郵箱吧。
當你制作出這么一個簡單的演示文稿后，你應該記住，使用它制作出的效果如何，你的想象和創造力是唯一決定性的因素！
體會：
正因為我們是前端，所以用前端技術做做各種嘗試沒什么不好，impress更可以讓我們的演示文稿更有新意，所以簡單了解下絕對是值得的，學習是最好的投資。
優點：
- 個人非常喜歡overview的功能
- 因為HTML+CSS都需要自己完成，位置和效果都得自己經手，視覺效果都由自己掌控
- 在我用過的同類產品中視覺效果最絢，CSS3+3D效果，直接給觀眾看暈:)
缺點：
- impress在視覺表現上確實非常強大，比起同樣做演示文稿的 html5slides 和 deck.js， impress.js的復雜度上高了不少，而且如果想把演示文稿排版的好看可能需要花掉大量的時間.
- *如果閑impress麻煩的朋友可以去看看 html5slides 和 deck.js的資料，視覺效果會稍差一些，不過上手會簡單不少。
- 不要把3D和旋轉用得太花哨、太絢，看的人會暈，恰當就好哈