談談impress.js初步理解

一、對impress.js認識

　　impress.js 採用 CSS3 與 JavaScript 語言完成的一個可供開發者使用的表現層框架(演示工具)。

　　如今普通開發者能夠利用 impress.js 本身開發出相似效果的演示工具，但性能比基於 FLASH 的 Prezi 更優。其功能包括畫布的無限旋轉與縮放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同時，也支持傳統 PowerPoint 形式的幻燈演示。

　　目前 impress.js 是基於 webkit 瀏覽器（Chrome、Safari）開發，而在其它基於非 webkit 引擎，但支持 CSS3 3D 的瀏覽器也能正常運行。

二、使用impress.js

　　引入impress.js:

 

複製代碼代碼以下:

<script src="js/impress.js"></script>

 

　　如今你能夠看到建立一個新的幻燈片是多少的容易了。每一個幻燈片是一個<div>元素 (在wrapper內) 其class名稱叫作'step'。

 

複製代碼代碼以下:

<div class="step">
    My 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軸旋轉多少度。

實例目錄：

以上內容就是我對impress.js的初步理解，可能對此理解比較膚淺，以後小編還會深刻研究，請網友持續關注本站。