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