一統江湖的大前端(1)——PPT製做庫impress.js

《一統江湖的大前端》系列是本身的學習筆記，旨在介紹javascript在非網頁開發領域的應用案例和發現各種好玩的js庫，不按期更新。若是你對前端的理解仍是寫寫頁面綁綁事件，那你真的是有點OUT了，前端能作的事情已經太多了, 手機app開發 , 桌面應用開發 , 用於神經網絡人工智能的庫 , 頁面遊戲 , 數據可視化 , 甚至 嵌入式開發 ，什麼火就搞什麼,絕對是專業的蹭熱點小能手。

impress.js是什麼

impress.js 是一款基於 css-3D 和 css動畫 、受到高逼格PPT原型工具 prezi 啓發而開發的演示文稿製做庫,github上星星高達33k個,若是你已經厭煩了使用PowerPoint製做連本身都以爲醜的PPT，那麼 impress.js 是一個很是好的選擇，簡潔高效逼格高。

獲取impress.js庫文件及官方示例請點擊impress.js地址

關鍵API

下述api用於HTML標籤屬性，學習時直接對照官方代碼倉中的example走一遍，看一遍示例代碼，基本都能學會。

• 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軸旋轉多少度。

實戰示例

附件中的 CSS-presentation 可經過雙擊文件中的index.html直接打開，是本身之前在作團隊內部分享時使用 impress.js製做的幻燈片，時間較短，直接套用了官方示例並對個別細節進行了調整，放出來方便你們參考交流.

相關原理

impress.js的框架原理並不複雜，寫在html標籤上的屬性能夠經過 document.querySelector('元素名').dataset["屬性名"]的方式取得其值,而後將每一張幻燈片相關的值賦值給CSS3D相關的屬性，併爲其設定過渡時的漸變更畫便可。

CSS3D是指transition漸變，animation動畫以及transform變形