Impress.js上手

 

 

前言：

　　如果你已经厌倦了使用PPT设置路径、设置时间、设置动画方式来制作动画特效、那么Impress.js将是你一个非常好的选择。

　　用它制作的PPT将更加直观、效果也是嗷嗷美观的。

　　当然，如果用它来装X，是需要付出一些代价的，不过如果你是一个前端爱好者，理解HTML/CSS，那么就没什么问题了。

　　看看网上的实例，动手练习练习，分分钟就能上手了。

 

 

 

介绍：

　　impress.js 是国外一位开发者受 Prezi 启发，采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。　　现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具，但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同时，也支持传统 PowerPoint 形式的幻灯演示。　　目前 impress.js 是基于 webkit 浏览器（Chrome、Safari）开发，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的浏览器也能正常运行。

 

 

 

演示：

官网展示效果：http://bartaz.github.io/impress.js/#/overview

本人制作的第一个示例：http://guyingsoft.com/gyPage/About/index.html

　　手机暂时可能看不了，因为它是使用方向键(←/→)或Tab键切换播放的。

　　从下面的下载地址即可下载Impress.js的源码，里面附带了官网的效果Demo。

　　如果需要上面我做的那个例子，留言邮箱就OK了。

 

 

 

准备：

1. Impress.js的源码已经发布在了GitHub上，下载即可：https://github.com/bartaz/impress.js。
2. 浏览器：Chrome、Safari、FireFox、IE10(有的人说不行，不知道为什么)。
3. 代码编辑器(在这里我用的是WebStorm)。

　　OK、一切准备就绪，开搞、

　　大家一步一步跟着写，impress.js怎么用就会秒懂了。

 

 

 

步骤一：

1. 新建一个HTML页面，在