跟大家講解下有關Impress.js上手，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說Impress.js上手，小編也收集到了有關Impress.js上手的相關資料，希望大家看到了會喜歡。
前言：如果你已經厭倦了使用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頁面，在結束之前引入上面下載的impress.js 在中創建兩個div：第一個class為“impress-not-supported”，表示不支持是的提示信息，你懂的；另一個的id為“impress”，表示幻燈片的容器。注意這里是id，我剛玩的時候就寫成了class，結果impress一直報錯找不到監聽等錯誤信息。代碼如下：
1 2 3 4 5 Impress.js Demo - 孤影 6 7 8 9 10 11 12 13 14
步驟二：現在我們就要來創建每一個切換的步驟了。
在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，所以它會出現在頁面的中間：
《Poker Face》 - Lady Gaga
3.我們創建第二個幻燈片，它的data-x為500，data-y依舊為0，所以切換到第二的時候，它會向右平移切換到這個幻燈片：
I wanna hold them like they do in Texas Plays.
4.下面創建第三個幻燈片，它的data-x依舊為500，data-y為-400，所以它會向上平移400px切換至此：
Fold them let them hit me raise it Baby stay with me.
4.平移的效果是不是感覺沒什么意思？下面我們第四張幻燈片來點兒花樣：
使用data-scale控制縮放的大小，在這里我設置為0.5，表示縮放為原大小的一半；data-x依舊500，data-y為-800。
表示向上移動400px，并且縮放一半的大小，代碼如下：
(I love it.)
5.第五張幻燈片我們使用data-rotate屬性來設置它的旋轉動畫。
在這里，我設置當前的data-x為0、data-y依舊是-800，data-rotate為90。
表示，它將會安裝旋轉90°的動畫，想左翻轉500px，顯示當前幻燈片，代碼如下：
Love game intuition play the cards with Spades to start.
6.下面來點兒終極的，設置data-x為-1200，data-y為0，表示當前幻燈片相對于前一張向左1200px向下800px。
然后分別使用data-rotate-x、data-rotate-y、data-rotate-z設置旋轉角度，并且使用data-scale設置縮放比例為放大4倍。
代碼如下：
And after he's been hooked I'll play the on that's on his heart.
7.現在你已經可以打開瀏覽器運行代碼了，是不是感覺效果相當霸氣。
當然，界面可能有點丑，你可以按照個人喜好寫點樣式。如果懶得寫的話，也可以使用下面我簡單些的幾個樣式：
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; }
OK、通過以上7個小步驟，我們就已經完成了一張簡單粗暴的演示文稿了。
你也就可以發揮自己獨特的想象力來動手制作一個嚇尿一片人的Web演示文稿的展示效果了。
附注：這里還有一個全局預覽的效果，就是把所有step塊的的內容全部放在一個平面顯示，效果超贊。
在這里，我在所有step后面創建一個id為overview的div，作為整體預覽的展示塊，展示縮放大小為放大3倍，x和y的位置如下等代碼如下：
結尾：本實例所有代碼如下：
1 2 3 4 5 Impress.js Demo - 孤影 6 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 12 13 14 15 16 17 《Poker Face》 - Lady Gaga18 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 26 27 28 29 32 33
如果還需要再看看開頭我做的那個演示實例的話，留言郵箱吧。
當你制作出這么一個簡單的演示文稿后，你應該記住，使用它制作出的效果如何，你的想象和創造力是唯一決定性的因素！
體會： 正因為我們是前端，所以用前端技術做做各種嘗試沒什么不好，impress更可以讓我們的演示文稿更有新意，所以簡單了解下絕對是值得的，學習是最好的投資。 優點： 個人非常喜歡overview的功能 因為HTML+CSS都需要自己完成，位置和效果都得自己經手，視覺效果都由自己掌控 在我用過的同類產品中視覺效果最絢，CSS3+3D效果，直接給觀眾看暈:) 缺點： impress在視覺表現上確實非常強大，比起同樣做演示文稿的 html5slides 和 deck.js， impress.js的復雜度上高了不少，而且如果想把演示文稿排版的好看可能需要花掉大量的時間. *如果閑impress麻煩的朋友可以去看看 html5slides 和 deck.js的資料，視覺效果會稍差一些，不過上手會簡單不少。 不要把3D和旋轉用得太花哨、太絢，看的人會暈，恰當就好哈來源：php中文網