Impress.js 使用入门

impress-base.md

impress.js 使用入门

impress.js 即是一个使用 JavaScript 来做 PPT 效果网页的框架，使用起来也非常方便。如果对它还不了解的同学，可以看看：

• 官方demo
• Github repo

如何初始化

下载

去 impress.js 的 Github repo 下载库文件。

在页面中引入 impress.js

在本地保存 impress.js，并新建 HTML 页面，在页面中引入 impress.js：

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

初始化 impress

在 HTML 文档中，创建 id 值为 impress 的节点作为所有 PPT 内容的包裹节点：

<div id="impress"></div>

在页面中加入如下 JavaScript 代码：

impress().init();

添加效果

初始化的工作完成之后，我们就可以开始添加内容和效果啦。

全局设定

全局设定的属性应该添加在 id 为 impress 的包裹节点上。

动画时间

各个分页间的过渡动画的时间，可以通过 transition-duration 属性设置，默认值为 1000，单位为毫秒：

<div id="impress" data-transition-duration="2000"></div>

3D透视

整个项目的 3D 透视距离可以通过 perspective 属性设置，默认值为 1000，单位为像素：

<div id="impress" data-perspective="500"></div>

关于 CSS 3D 透视的详细介绍，可以看这篇文章

分页控制

创建分页

在包裹节点中添加内容块作为分页，分页最外层的元素需要给 class 添加 step，id 可选添加，作为该页的定位地址：

<div id="start" class="step"></div>

定位

其实所有的分页都处于一个很大的空间中，具体每个分页所处的x、y、z坐标可通过属性自由定义：

<div class="step" data-x="100" data-y="-500" data-z="-300"></div>

缩放

通过 scale 属性可以设置分页的缩放：

<div class="step" data-scale="4"></div>

旋转

通过 rotate 属性可以设置分页的旋转角度：

<div class="step" data-rotate="60"></div>

3D 旋转

通过 rotate-x 等属性可以设置分页的 3D 旋转角度：

<div class="step" data-rotate-x="10" data-rotate-y="60" data-rotate-z="130"></div>

浏览器兼容

impress.js 会自动检测浏览器是否支持需要的特性，当不支持时，会对 body 标签添加 'impress-not-supported' 类，于是我们可以做一些相应的应对和处理。

Happy coding and have fun!