impress.js

impress.js是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架。功能:包括画布的无限旋转与缩放,任意角度放置任意大小的文字,CSS3 3D 效果支持等。同时,也支持传统 PowerPoint 形式的幻灯演示。

impress.js 是基于 webkit 浏览器(Chrome、Safari)开发,而在其它基于非 webkit 引擎,但支持 CSS3 3D 的浏览器也能正常运行。

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

Prezi,是一种主要通过缩放动作和快捷动作使想法更加生动有趣的演示文稿软件。它打破了传统Powerpoint的单线条时序,采用系统性与结构性一体化的方式来进行演示,以路线的呈现方式,从一个物件忽然拉到另一个物件,配合旋转等动作则更有视觉冲击力             

 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轴旋转多少度。

步骤:   

 1.html5页面结构先准备就绪    

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

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

4.class="impress-not-supported"是当浏览器不支持时显示给用户的提示信息,降级处理的id可有可无,当有id时url中的hash变化是随着id走;反之就是step-[num]   

5.在wrapper内创建一个幻灯片只需要新建一个class="step"的即可。

例:impress.html#/step-2

想怎么玩----------------------都行-------------------

你可能感兴趣的:(impress.js)