impress.js 即是一個(gè)使用 JavaScript 來(lái)做 PPT 效果網(wǎng)頁(yè)的框架慈省，使用起來(lái)也非常方便馆匿。
如何初始化
下載
去 impress.js 的 Github repo 下載庫(kù)文件。
在頁(yè)面中引入 impress.js
在本地保存 impress.js俺亮，并新建 HTML 頁(yè)面啄育，在頁(yè)面中引入 impress.js：
<script src="impress.js"></script>
初始化impress
在 HTML 文檔中它浅，創(chuàng)建 id 值為 impress 的節(jié)點(diǎn)作為所有 PPT 內(nèi)容的包裹節(jié)點(diǎn)：
<div id="impress"></div>
在頁(yè)面中加入如下 JavaScript 代碼：
impress().init();
添加效果
初始化的工作完成之后，我們就可以開(kāi)始添加內(nèi)容和效果置蜀。
全局設(shè)定
全局設(shè)定的屬性應(yīng)該添加在 id 為 impress 的包裹節(jié)點(diǎn)上奈搜。
動(dòng)畫(huà)時(shí)間
各個(gè)分頁(yè)間的過(guò)渡動(dòng)畫(huà)的時(shí)間，可以通過(guò) transition-duration 屬性設(shè)置盯荤，默認(rèn)值為 1000馋吗，單位為毫秒：
<div id="impress" data-transition-duration="2000"></div>
分頁(yè)控制
創(chuàng)建分頁(yè)
在包裹節(jié)點(diǎn)中添加內(nèi)容塊作為分頁(yè)，分頁(yè)最外層的元素需要給 class 添加 step秋秤，id 可選添加宏粤，作為該頁(yè)的定位地址：
<div id="start" class="step"></div>
定位
其實(shí)所有的分頁(yè)都處于一個(gè)很大的空間中脚翘，具體每個(gè)分頁(yè)所處的x、y绍哎、z坐標(biāo)可通過(guò)屬性自由定義：
<div class="step" data-x="100" data-y="-500" data-z="-300"></div>
縮放
通過(guò) scale 屬性可以設(shè)置分頁(yè)的縮放：
<div class="step" data-scale="4"></div>
旋轉(zhuǎn)
通過(guò) rotate 屬性可以設(shè)置分頁(yè)的旋轉(zhuǎn)角度：
<div class="step" data-rotate="60"></div>
3D旋轉(zhuǎn)
通過(guò) rotate-x 等屬性可以設(shè)置分頁(yè)的 3D 旋轉(zhuǎn)角度：
<div class="step" data-rotate-x="10" data-rotate-y="60"
data-rotate-z="130"></div>
瀏覽器兼容
impress.js 會(huì)自動(dòng)檢測(cè)瀏覽器是否支持需要的特性来农，當(dāng)不支持時(shí)，會(huì)對(duì) body 標(biāo)簽添加 'impress-not-supported' 類(lèi)崇堰，于是我們可以做一些相應(yīng)的應(yīng)對(duì)和處理沃于。
