最新的 Chrome, Safari 或者 Firefox 浏览器，不支持IE、Opera。使用Chrome效果最佳。（请按空格键）
浏览快捷键
上一页pg upleftup
下一页tabspacepg downrightdown
也可以使用链接返回指定页面，也支持浏览器返回按钮。
1. 配置：标准的Html5页面
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>impress.js</title>
<link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div id="impress" class="impress-not-supported">
</div>
<script src="js/impress.js"></script>
<script>impress();</script>
</body>
</html>
2. 创建幻灯片：
每个幻灯片是一个<div>元素，其class名称叫做’step’。
<div class="step">
My first slide
</div>
3. 数据属性：
用来描述幻灯片大小，切换等效果。
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>
第四张幻灯片：
使用缩放值来显示一个幻灯片如何放大缩小。
<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>
它的scale值为0.5，意味着它应该是一半的尺寸。当它变成活动的演示时将通过必需的倍数调节所有幻灯片的缩放尺寸。在这个示例中它的意思就是这个幻灯片应该正常显示（比例为1），它将需要被放大2倍 (0.5*2 = 1)，所有的其他幻灯片也将被放大至2倍而变成2倍大小。
第五张幻灯片：
旋转属性允许你旋转一个幻灯片到当前视图，幻灯片5被设置旋转50度。
<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5 and it rotates in.
</div>
旋转属性允许你旋转一个幻灯片到当前视图，幻灯片5被设置旋转50度。
3D转换：
你可为每个维度的轴指定旋转属性(x,y,z)。
<div class="step" data-x="-2600" data-y="-800"
data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
This is slide 6 and it has a 3D transition AND a scale.
</div>
x轴是横轴，意思是你可使事物倾斜(正值)或向后(负值)，y轴是竖轴，所以你可使事物向左摇摆(负值)或向右(正值)，z轴是纵轴，这将是旋转的东西向上（负值）和向下（正值）。
组合：
你可以以你的想象力用不可思议的和令人惊奇的方式合并这些效果来创建你自己的幻灯片展示风格。
实时数据演示(ajax请求后台数据)
定时器自动播放
触摸屏演示系统
API：
使用impress.js提供的api来控制幻灯片的显示。
var api = impress();
`api.next()` - 跳到下一张幻灯片,
`api.prev()` - 跳到上一张幻灯片
`api.goto(stepElement) - 跳到制定的幻灯片.
不支持的浏览器：
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。
全局预览：
增加一个id为overview的幻灯片
<div id="overview" class="step" data-x="1000" data-y="2000" data-scale="10">
</div>