html5js实现ppt制作,impress.js前端制作酷炫ppt详细教程⼀，技术简介
相信⼤家对传统的那种幻灯⽚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度。
rotate属性步骤四：幻灯⽚预览与初始化
上⾯⼏步全部做好之后，我们就可以展现我们的设计成果了，我们需要全局预览下，查看⼀下幻灯⽚的设置以及播放顺序是否是我们所预想的，然后让所有的幻灯⽚⼉按顺序执⾏⼀遍。
在整个html页⾯的最后添加⼀句impress().init()初始化的⽅法，该⽅法⽤来就绪初始化整个HTML页⾯，完成幻灯⽚的就绪⼯作。
以上全部内容就是我们今天使⽤impress.js完成的整个PPT在线设计应⽤步骤，如果⼤家看上图的详细教程还有不明⽩的地⽅可以参考下⾯的英⽂翻译过来的在线中⽂⽂档，那个会更加的清晰，⼤家也可以下载impress.js的源码看研读⼀下他们的源码⽂件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。