Impress.js是一款基於css3轉 換和過渡、工作於現代瀏覽器(Google Chrome或Safari (或 Firefox 10 或 IE10))、並受prezi.com的理念啟發的演示工具。如果你已經厭煩了使用PowerPoint制作PPT，那么impress.js是一個非常 好的選擇，用它做的PPT更加直觀，效果也非常的不錯。查看效果
Impress.js 是一個非常棒的用來創建在線演示的javascript庫，但在其實際的項目網頁中卻沒有說明文檔。這篇指導將會幫你開始並創建一個簡單的幻燈片演示，但完成后請記住它，用它做的不只局限於此，唯一的限制是你的創造力！
為你准備的可用的教程： 請在GitHub上查看下載
必需條件
想看有效的教程，請使用Google Chrome或Safari (或 Firefox 10 或 IE10)。Impress.js目前不兼容早期版本的Firefox或Internet Explorer。
配置
首要的事情是你要創建一個新的網頁，我的是index.html並且里面配置了基本的head和body元素。
<!doctype html>
<html>
<head>
<title>Impress Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
</html>
在body元素結束前引入impress.js文件，這是Impress包引入到你的項目中。
<script type=”text/javascript” src=”impress.js”></script>
接下來我們將創建一個wrapper包含幻燈片，這里用一個簡單的id為 ‘impress’<div>元素。
<div id="impress"> </div>
創建幻燈片
現在你可以看到創建一個新的幻燈片是多少的容易了。每個幻燈片是一個<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軸旋轉多少度。
動作中的數據屬性
下面的幻燈片設置將指導你完成每個動作的數據屬性。
讓我們從一個初始的幻燈片開始，這個幻燈片已將它自己的x和y數據屬性設置為0，所以會出現在頁面的中間。
<div class="step" data-x="0" data-y="0">
This is my first slide
</div>
第二個幻燈片的x值為500，但y值為0，這意味着當它活動的時候它將會出現在穿過x軸(向左滑動)500px的地方。
<div class="step" data-x="500" data-y="0">
This is slide 2
</div>
簡單吧？下一個幻燈片將同第2個幻燈片同樣的x位置開始，但其y位置為-400，這將會是從頂部400px處滑入。
<div class="step" data-x="500" data-y="-400">
This is slide 3
</div>
幻燈片4使用縮放值來顯示一個幻燈片如何放大縮小。它的scale值為0.5，意味着它應該是一半的尺寸。當 它變成活動的演示時將通過必需的倍數調節所有幻燈片的縮放尺寸。在這個示例中它的意思就是這個幻燈片應該正常顯示（比例為1），它將需要被放大2倍 (0.5*2 = 1)，所有的其他幻燈片也將被放大至2倍而變成2倍大小。
<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>
旋轉屬性允許你旋轉一個幻燈片到當前視圖，幻燈片5被設置旋轉50度。
<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5 and it rotates in.
</div>
最后，為3D轉換，你可為每個維度的軸指定旋轉屬性(x,y,z)。
x軸是橫軸，意思是你可使事物傾斜(正值)或向后(負值)，y軸是豎軸，所以你可使事物向左搖擺(負值)或向右(正值)，z軸是縱軸，這將是旋轉的東西向上（負值）和向下（正值）。
組合
現在你了解了所有你需要給幻燈片展示添加動畫效果的的數據屬性，你可以以你的想象力用不可思議的和令人驚奇的方式合並這些效果來創建你自己的幻燈片展示風格。
<div class="step" data-x="-2600" data-y="-800" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4"> This is slide 7 and it has a 3D transition AND a scale. </div>
不支持的瀏覽器
Impress自動檢測瀏覽器支持與否，並且如果不支持則自動向wrapper“<div>”添加一個樣式名稱為“impress-not-supported”的樣式，使用一些css我們可以在瀏覽器上向人們顯示不支持Impress的信息。
在開始的<div id=”impress”>添加下面的內容：
<div class="no-support-message">
Your browser doesn't support impress.js. Try Chrome or Safari.
</div>
然后，創建一個樣式表單或引入一個已經存在的樣式表單：
.no-support-message { display:none; }
.impress-not-supported .no-support-message { display:block; };
默認是隱藏消息的，但如果瀏覽器不支持時當前樣式就會變成impress-not-supported。
玩得開心!
本教程介紹使用Impress.js創建自己的在線演示文稿的基本資料。整個例子您可在GitHub上下載和演示。
原文地址：http://www.cubewebsites.com/blog/guides/how-to-use-impress-js/