html5 js实现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的排列顺序由上到下依次渲染。