一統江湖的大前端(1)——PPT制作庫impress.js
阿新 • • 發佈：2018-09-03
sele 是什麽 power 官方 個數 RoCE 嵌入式開發 學習筆記 ani
《一統江湖的大前端》系列是自己的學習筆記，旨在介紹javascript在非網頁開發領域的應用案例和發現各類好玩的js庫，不定期更新。如果你對前端的理解還是寫寫頁面綁綁事件，那你真的是有點OUT了，前端能做的事情已經太多了, 手機app開發 , 桌面應用開發 , 用於神經網絡人工智能的庫 , 頁面遊戲 , 數據可視化 , 甚至 嵌入式開發 ，什麽火就搞什麽,絕對是專業的蹭熱點小能手。
impress.js是什麽
impress.js 是一款基於 css-3D 和 css動畫 、受到高逼格PPT原型工具 prezi 啟發而開發的演示文稿制作庫,github上星星高達33k個,如果你已經厭煩了使用PowerPoint制作連自己都覺得醜
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是指transition漸變，animation動畫以及transform變形
一統江湖的大前端(1)——PPT制作庫impress.js