impress.js的绚丽演示文稿效果

如果你已经厌烦了使用PowerPoint制作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 的浏览器也能正常运行。

 

　　impreess源码已经发布在GitHub上，地址：https://github.com/bartaz/impress.js

 

　　官方demo地址：http://bartaz.github.com/impress.js

 

　　因为在其项目网页中却没有找到说明文档&使用文档，所以这篇文章将一步一步创建一个较初级的演示文稿，我们接着往下走。

 

　　请准备好现代浏览器：Google Chrome(效果最佳)、Safari或FF.

　　*我的IE10不支持，不知道为什么很多资料上写着IE10也能支持，背了个催。

 

 

 

配置

 

html5页面结构先准备就绪

创建一个id="impress"的wrapper(载体)，直接标签同样也可以div就好，其他

在body标签结束前引入impress.js文件并且调用

class="impress-not-supported"是当浏览器不支持时显示给用户的提示信息，降级处理你懂的，不多解释哈

复制代码

　　

　　

　　

    

    

　　　　

　　

　　

复制代码

 

 

在wrapper内创建一个幻灯片只需要新建一个class="step"的

即可。

的id可有可无，当有id时url中的hash变化是随着id走；反之就是step-[num]，如

    first slide

 

 

 数据属性：用来描述幻灯片大小，切换等效果。

　　data-x = 幻灯片的x坐标

 

　　data-y = 幻灯片的y坐标

 

　　data-scale = 通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍

 

　　data-rotate = 通过一个数字度数来确定旋转你的幻灯片

 

　　data-rotate-x = 为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）

 

　　data-rotate-y = 为3D用，这个数字度数是它应该相对y轴旋转多少度。 （左摆/右摆）

 

　　data-rotate-z = 为3D用，这个数字度数是它应该相对z轴旋转多少度。

 

 

 

创建

 

　　数据属性那段是你接下来需要重点打交道的，接下来开始step by step创建一个演示文稿。

 

　　从一个初始的幻灯片开始，这个幻灯片已将它data-x和data-y数据属性设置为0，所以会出现在页面的中间。

 

    This is slide 1 - 【标题】

　　第二个幻灯片的data-x值为500、data-y值为0，活动的时候它将会向左平移(滑动)500px的地方。

 

    This is slide 2

　　第三张幻灯片其data-x值不变，data-y位置为-400，这将会是从顶部400px处滑入屏幕。　　

 

    This is slide 3

　　第四张幻灯片来个新花样，使用data-scale的值控制其缩放大小。data-scale="0.5"表示着它应该是一半的尺寸，当它变成活动的演示时将通过必需的倍数调节所有幻灯片的缩放尺寸，从这一步绚丽开始起步

 

    This is slide 4