一般演讲、培训等场合，我们都离不开 PPT，那么如何做出一款与众不同而有充满科技感的 PPT 呢？这时候，可以尝试一下在线 PPT。

一、选择在线 PPT 的几大原因

1.省去了上传*载下**的麻烦；

2.降低了客户端对 PPT 软件的依赖；

3.随时更新，更灵活；

4.同屏*放播**，全场互动，增加用户体验；

…

二、多种选择

1.revealjs

一个可以帮我们轻易使用 HTML 创建漂亮演示文稿的框架。

2.impress

效果非常酷炫，下文将深入介绍。

3.fathom.js

使用 HTML，CSS，JS 来实现滑动页面，体验非常接近 PPT。

4.focusky

操作界面简洁，易上手。支持 3D 幻灯片演示特效打破常规。

三、强力推荐

上面介绍了很多可用的在线 PPT 类库，在我看来最酷炫的莫过于 impress.js，我们先来看一个演示：

注意：在 Impress 中大量使用 3D 动画，可能会使页面变得卡顿。

四、基本使用

1.定义结构

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

2.每页 PPT 使用 step 类来区分

3.使用 data-x，data-y 完成平移操作

4.缩放：data-scale

5.页面旋转：data-rotate

6.调整 z 方向层级 data-z，可以理解为离用户的远近距离

7.使用 data-rotate-x, data-rotate-y, data-rotate-z 实现 3D 旋转

此外，还有一些可用的 css 类，js 初始化方法，以及 stepenter 事件等，具体可以参考官方文档。

五、投屏互动

演讲者端，监听 impress:stepgoto 事件：

观众端，接收 slide 消息，然后自动翻页：

需要特别注意，我们要禁止掉观众端的操作事件，否则你演讲过程就会被别人牵着鼻子走了～

六、可视化编辑

如果你不喜欢写代码，我们可以选择可视化编辑器。

七、更多资源

• 10 Best JavaScript And HTML5 Presentation Frameworks
• impress examples-and-demos
• 可视化编辑器
• impress 导出 pdf
• impress api 文档

八、热门原创文章

1.Nuxtjs 2.0 升级爬坑

2.初学算法，你应该这么玩

3.HTTP 2.0 时代，你落伍了吗？