概述
如果你已經厭煩了使用PowerPoint製作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 的瀏覽器也能正常運行。
impreess源碼已經發布在GitHub上，地址：https://github.com/bartaz/impress.js
官方demo地址：http://bartaz.github.com/impress.js
因爲在其項目網頁中卻沒有找到說明文檔&使用文檔，所以這篇文章將一步一步創建一個較初級的演示文稿，我們接着往下走。
請準備好現代瀏覽器：Google Chrome(效果最佳)、Safari或FF.
*我的IE10不支持，不知道爲什麼很多資料上寫着IE10也能支持，背了個催。
配置
- html5頁面結構先準備就緒
- 創建一個id="impress"的wrapper(載體)，直接div就好，其他標籤同樣也可以
- 在body標籤結束前引入impress.js文件並且調用
- class="impress-not-supported"是當瀏覽器不支持時顯示給用戶的提示信息，降級處理你懂的，不多解釋哈
<!doctype html> <html> <head> <title>darren - Impress demo</title> <meta charset="utf-8" /> <link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" /> </head> <body> <div class="impress-not-supported"> </div> <div id="impress"> </div> <script src="http://bartaz.github.com/impress.js/js/impress.js"></script> <script>impress().init();</script> </body> </html>
- 在wrapper內創建一個幻燈片只需要新建一個class="step"的<div>即可。<div>的id可有可無，當有id時url中的hash變化是隨着id走；反之就是step-[num]，如
<div class="step"> first slide </div>
- 數據屬性：用來描述幻燈片大小，切換等效果。
data-x = 幻燈片的x座標
data-y = 幻燈片的y座標
data-scale = 通過指定一個值來進行縮放，data-scale爲5則將會在你幻燈片原始尺寸基礎放大5倍
data-rotate = 通過一個數字度數來確定旋轉你的幻燈片
data-rotate-x = 爲3D用，這個數字度數是它應該相對x軸旋轉多少度。（前傾/後仰）
data-rotate-y = 爲3D用，這個數字度數是它應該相對y軸旋轉多少度。 （左擺/右擺）
data-rotate-z = 爲3D用，這個數字度數是它應該相對z軸旋轉多少度。
創建
數據屬性那段是你接下來需要重點打交道的，接下來開始step by step創建一個演示文稿。
從一個初始的幻燈片開始，這個幻燈片已將它data-x和data-y數據屬性設置爲0，所以會出現在頁面的中間。
<div class="step" data-x="0" data-y="0"> This is slide 1 - 【標題】 </div>
第二個幻燈片的data-x值爲500、data-y值爲0，活動的時候它將會向左平移(滑動)500px的地方。
<div class="step" data-x="500" data-y="-400"> This is slide 2 </div>
第三張幻燈片其data-x值不變，data-y位置爲-400，這將會是從頂部400px處滑入屏幕。
<div class="step" data-x="500" data-y="-400"> This is slide 3 </div>
第四張幻燈片來個新花樣，使用data-scale的值控制其縮放大小。data-scale="0.5"表示着它應該是一半的尺寸，當它變成活動的演示時將通過必需的倍數調節所有幻燈片的縮放尺寸，從這一步絢麗開始起步
<div class="step" data-x="500" data-y="-800" data-scale="0.5"> This is slide 4 </div>
第五張幻燈片旋轉屬性允許你旋轉一個幻燈片到當前視圖，幻燈片5被設置旋轉90度，視覺效果微叼哈
<div class="step" data-x="0" data-y="-800" data-rotate="90"> This is slide 5 </div>
第六張幻燈片開始3D style，可爲每個維度的軸指定旋轉屬性(x,y,z)。x軸是橫軸，意思是你可使事物傾斜(正值)或向後(負值)，y軸是豎軸，所以你可使事物向左搖擺(負值)或向右(正值)，z軸是縱軸，這將是旋轉的東西向上（負值）和向下（正值）。
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4"> This is slide 6 </div>
以上6張幻燈片把數據屬性內的值都過了一遍，一張略high的演示文稿就呈現在我們眼前。你可以以你的想象力用不可思議的和令人驚奇的方式合併這些效果來創建你自己的幻燈片展示風格。
- 全局預覽
個人超讚這個視覺體驗，把所有的幻燈片都平行的展示，排列的合理會非常帥氣，使用方式就是在幻燈片6後面插入一段html.
<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>
隨着你幻燈片位置的不同所以全局預覽的值也會不一樣，拿着結尾處的demo一點一點調整找感覺，希望你會喜歡！
完成後請記住它，用它做的不只侷限於此，唯一的限制是你的創造力！
個人體會
正因爲我們是前端，所以用前端技術做做各種嘗試沒什麼不好，impress更可以讓我們的演示文稿更有新意，所以簡單瞭解下絕對是值得的，學習是最好的投資。
優點：
- 個人非常喜歡overview的功能
- 因爲HTML+CSS都需要自己完成，位置和效果都得自己經手，視覺效果都由自己掌控
- 在我用過的同類產品中視覺效果最絢，CSS3+3D效果，直接給觀衆看暈:)
缺點：
- impress在視覺表現上確實非常強大，比起同樣做演示文稿的 html5slides 和 deck.js， impress.js的複雜度上高了不少，而且如果想把演示文稿排版的好看可能需要花掉大量的時間.
*如果閒impress麻煩的朋友可以去看看 html5slides 和 deck.js的資料，視覺效果會稍差一些，不過上手會簡單不少。 - 不要把3D和旋轉用得太花哨、太絢，看的人會暈，恰當就好哈
以下是demo代碼，初學者自己動手多改改感覺就好了。
<!doctype html> <html> <head> <title>darren - Impress demo</title> <meta charset="utf-8" /> <link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" /> </head> <body> <div class="impress-not-supported"> <div class="fallback-message"> <p>你的瀏覽器<b>不支持</b> impress.js, 所以當前展示的是簡化版。</p> <p>爲了獲得更好的體驗，請使用最新的 <b>Chrome</b>, <b>Safari</b> 或者 <b>Firefox</b> 瀏覽器。</p> </div> </div> <div id="impress"> <div class="step" data-x="0" data-y="0"> Darren code - [標題] </div> <div class="step" data-x="500" data-y="0"> This is slide 2 </div> <div class="step" data-x="500" data-y="-400"> This is slide 3 </div> <div class="step" data-x="500" data-y="-800" data-scale="0.5"> This is slide 4 </div> <div class="step" data-x="0" data-y="-800" data-rotate="90"> This is slide 5 </div> <div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4"> This is slide 6 </div> <!-- darren code --> <div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div> </div> <script src="http://bartaz.github.com/impress.js/js/impress.js"></script> <script>impress().init();</script> </body> </html>
突然想起一句話作爲文章總結吧：“當你有把錘子的時候,你看什麼都像釘子”。