如果你已經厭倦了使用PPT設定路徑、設定時間、設定動畫方式來制作動畫特效、那麼Impress.js将是你一個非常好的選擇。
用它制作的PPT将更加直覺、效果也是嗷嗷美觀的。
當然，如果用它來裝X，是需要付出一些代價的，不過如果你是一個前端愛好者，了解HTML/CSS，那麼就沒什麼問題了。
看看網上的執行個體，動手練習練習，分分鐘就能上手了。
手機暫時可能看不了，因為它是使用方向鍵(←/→)或Tab鍵切換播放的。
從下面的下載下傳位址即可下載下傳Impress.js的源碼，裡面附帶了官網的效果Demo。
如果需要上面我做的那個例子，留言郵箱就OK了。
浏覽器：Chrome、Safari、FireFox、IE10(有的人說不行，不知道為什麼)。
代碼編輯器(在這裡我用的是WebStorm)。
OK、一切準備就緒，開搞、
大家一步一步跟着寫，impress.js怎麼用就會秒懂了。
建立一個HTML頁面，在</body>結束之前引入上面下載下傳的impress.js
在<body>中建立兩個div：
第一個class為“impress-not-supported”，表示不支援是的提示資訊，你懂的；
另一個的id為“impress”，表示幻燈片的容器。注意這裡是id，我剛玩的時候就寫成了class，結果impress一直報錯找不到監聽等錯誤資訊。
代碼如下：
現在我們就要來建立每一個切換的步驟了。
在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代碼之後，我們需要使用它來初始化頁面，産生後面我們将要制作的效果，代碼如下：
2.建立第一個初始的幻燈片，他的data-x和data-y都設定為0，是以它會出現在頁面的中間：
3.我們建立第二個幻燈片，它的data-x為500，data-y依舊為0，是以切換到第二的時候，它會向右平移切換到這個幻燈片：
4.下面建立第三個幻燈片，它的data-x依舊為500，data-y為-400，是以它會向上平移400px切換至此：
4.平移的效果是不是感覺沒什麼意思？下面我們第四張幻燈片來點兒花樣：
使用data-scale控制縮放的大小，在這裡我設定為0.5，表示縮放為原大小的一半；data-x依舊500，data-y為-800。
表示向上移動400px，并且縮放一半的大小，代碼如下：
5.第五張幻燈片我們使用data-rotate屬性來設定它的旋轉動畫。
在這裡，我設定目前的data-x為0、data-y依舊是-800，data-rotate為90。
表示，它将會安裝旋轉90°的動畫，想左翻轉500px，顯示目前幻燈片，代碼如下：
6.下面來點兒終極的，設定data-x為-1200，data-y為0，表示目前幻燈片相對于前一張向左1200px向下800px。
然後分别使用data-rotate-x、data-rotate-y、data-rotate-z設定旋轉角度，并且使用data-scale設定縮放比例為放大4倍。
7.現在你已經可以打開浏覽器運作代碼了，是不是感覺效果相當霸氣。
當然，界面可能有點醜，你可以按照個人喜好寫點樣式。如果懶得寫的話，也可以使用下面我簡單些的幾個樣式：
OK、通過以上7個小步驟，我們就已經完成了一張簡單粗暴的示範文稿了。
你也就可以發揮自己獨特的想象力來動手制作一個吓尿一片人的Web示範文稿的展示效果了。
這裡還有一個全局預覽的效果，就是把所有step塊的的内容全部放在一個平面顯示，效果超贊。
在這裡，我在所有step後面建立一個id為overview的div，作為整體預覽的展示塊，展示縮放大小為放大3倍，x和y的位置如下等代碼如下：
本執行個體所有代碼如下：
本執行個體完整代碼
如果還需要再看看開頭我做的那個示範執行個體的話，留言郵箱吧。
當你制作出這麼一個簡單的示範文稿後，你應該記住，使用它制作出的效果如何，你的想象和創造力是唯一決定性的因素！
個人非常喜歡overview的功能
因為HTML+CSS都需要自己完成，位置和效果都得自己經手，視覺效果都由自己掌控
在我用過的同類産品中視覺效果最絢，CSS3+3D效果，直接給觀衆看暈:)
impress在視覺表現上确實非常強大，比起同樣做示範文稿的 html5slides 和 deck.js， impress.js的複雜度上高了不少，而且如果想把示範文稿排版的好看可能需要花掉大量的時間.
*如果閑impress麻煩的朋友可以去看看 html5slides 和 deck.js的資料，視覺效果會稍差一些，不過上手會簡單不少。
不要把3D和旋轉用得太花哨、太絢，看的人會暈，恰當就好哈
親們。碼字不容易，覺得不錯的話記得點贊哦。。