一，技术简介

相信大家对传统的那种幻灯片PPT已经屡见不鲜了，今天我们来介绍一种运用前端技术CSS3和javascript结合起来开发的一种适用于前端效果演示的在线酷炫PPT。

这种PPT制作是由一个叫 impress.js 的技术进行设计和制作，其底层也是依赖于CSS3的完成了一个前端框架，开发者可以依赖该库很轻松地完成酷炫的在线PPT开发。

只靠文字说明很难将该PPT的效果完全展示给大家，上图是我截图的一张实际的演示效果，大家也可以根据下面的地址看一下官方的实际演示案例。

目前该技术基于webkit 的浏览器引擎还不能兼容绝大多数的浏览器，只能在谷歌、Safari和IE10等浏览器中进行兼容和演示。

二、impress.js设计酷炫ppt的实现思路

作者借用impress.js研发这样一个在线PPT，其目的主要是为了更好地在线演示项目成果或者是项目效果的一种可视化的演示工具，它相对于其他传统的演示工具更加的强大和简单易用，其最主要的特点就是它可以酷炫的旋转、支持3D效果以及酷炫的缩放。

impress.js设计的在线ppt同时兼容传统的PPT所有的演示功能，在我们着手开发这样一个在线PPT之前我们先讲一下impress.js的设计实验思路。

其实只要我们掌握四个步骤就可以了解大致的具体思路了，第一步就是在HTML页面中准备多个名字叫step的div，每一个div就相当于一个页面儿，impress.js会根据这些div的排列顺序由上到下依次渲染。

页面酷炫、缩放、旋转以及三维立体的这些特征由下图中的三个重要的属性来决定。

1)scale用来控制幻灯片页面的宽度和高度。

2)position用来决定页面的位置，有二维空间坐标和三维空间的立体坐标。

3)rotate则是对应的那个缩放和旋转，我们可以根据三维空间X轴Y轴Z轴设置任意的旋转方向和宣传方式。

以上就是impress.js在线儿设计PPT的基本实现思路，我们把这个思路缕清了之后，接下来一步一步的完成整个PPT的在线制作。

三、impress.js设计制作ppt详细教程

步骤一：第一步我们先用前端工具创建一个标准的HTML5页面，在页面中将该技术所需的CSS文件和JS文件进行引入具体详见下图:

引入工作完之后，我们开始着手设计，为了确认浏览器是否兼容我们的脚本文件和样式文件，我们应该在body标签上面添加一个名为empress的class属性，这个属性可以帮我们检测浏览器是否支持我们所引入的两个脚本文件，如果不支持会给我们提示信息。

步骤二：第二步，我们需要创建一个画布也可以叫载体来承载所有的幻灯片页面儿，这个载体一般用DIV表示，但是div的id名字必须要叫empress，这样impress.js才能够正确识别它。

如果需要设置PPT的切换速度以及透视深度的话，可以在载体上面添加两个属性，这两个属性分别是data-transition-duration和data-perspective，一般使用默认值就好，其实可以不用设置的，如果都设置为零就不会有3D立体效果呈现。

步骤三：接下来的第三步，就是需要在载体上面创建一个一个的幻灯片页面了，幻灯片页面儿也是由div定义的，也就是相当于一个div算是一个幻灯片的页面。

必须给这些div加上名为step的class类属性，因为impress.js默认会识别名叫step的div为一个幻灯片页面。

然后每一个幻灯片内可以设置很多属性，比如说幻灯片的的坐标、位置、缩放比例，还有旋转、顺时针逆时针旋转以及3D场景下的X轴Y轴Z轴的空间旋转角度具体的属性详见下图：

接下来，我们就是按照第三步所罗列的那些属性做一个案例测试一下这些属性的使用情况。

1)impress.js的data-x和data-y属性设置

上图中，我们在一张幻灯片中添加了data-x和data-y这两个属性，实际意思就是定义X轴和Y轴的坐标位置其实就是幻灯片在画布中的位置所在。

2)data-scale属性设置

上图中的幻灯片div中设置了data-scale属性，这个属性定义的是幻灯片的缩放大小，值为4意思是将幻灯片儿按照原始尺寸放大四倍。

如果幻灯片儿正好播放到此处的话，如果由此处的幻灯片儿直接退出，幻灯片首先还原为原先的尺寸，然后再退出。

3)data-rotate属性设置

我们还可以设置幻灯片的div进行不同角度的旋转，上图中div中添加了data-rotate属性，这个属性就是控制幻灯片儿顺时针或者是逆时针旋转的一个属性。

值为90并且是正数表明按顺时针旋转，如果置为负数的话，就是按逆时针旋转，刚好旋转角度是90度。

步骤四：幻灯片预览与初始化

上面几步全部做好之后，我们就可以展现我们的设计成果了，我们需要全局预览下，查看一下幻灯片的设置以及播放顺序是否是我们所预想的，然后让所有的幻灯片儿按顺序执行一遍。

在整个html页面的最后添加一句impress().init()初始化的方法，该方法用来就绪初始化整个HTML页面，完成幻灯片的就绪工作。

以上全部内容就是我们今天使用impress.js完成的整个PPT在线设计应用步骤，如果大家看上图的详细教程还有不明白的地方可以参考下面的英文翻译过来的在线中文文档，那个会更加的清晰，大家也可以下载impress.js的源码看研读一下他们的源码文件。