impress

what is impress.js

 

 

 

impress.js 是一个用于展示的前端框架，基于大量 css3 的动画等特性。最大的特点是其基于 transform 来构建，通过空间位置的移动以及旋转来体现变化，视觉冲击性很强。

该库需要有很好的css功底以及空间想象能力

 

你是否已经厌倦了那些传统的幻灯片形式的表现方式？

你是否也认为在现代浏览器里，表现形式不应该受‘传统’的幻灯片模式的限制？

你是否希望让你的演讲以令人震撼的视觉效果来打动你的观众？

那么你应该试一试   impress.js

 

它是一个展现工具 

是受prezi.com的启发 

使用了现代浏览器里支持的CSS3 transforms 和 transitions功能。

 

把你的雄伟思想可视化

你的小小想法立体化

在无限的画布上通过定位，旋转和缩放把它们表现出来

 

 

 

 

如何用 impress.js 设计 presentation(外观)

 

基本思路

对于每个页面来说只有三种重要的属性——scale，position，rotate。

scale 决定了该页的大小。对应属性 width，height

position 决定了在三维空间中的坐标。对应属性 transform

rotate 则是旋转方式。对应属性 rotate[XYZ]

绕 X 轴

绕 Y 轴

绕 Z 轴

impress.js 会根据这些属性将每一页进行渲染，最后从第一页开始一步步进行播放，因此这些属性也就决定了补间动画的形式。在开始写代码之前一定要想好空间结构。

 

为一个step的class增加slide标签，那么你就得到了一张带白色背景和一些特殊样式的类似ppt单张的div，

当然，这些样式是需要引入impress-demo.css的，你不引入的话是没有的。也可以自己修改定义，事实上原作者建议你这么做

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

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

 

 

 

用它做的不只局限于此，唯一的限制是你的创造力！

当你有把锤子的时候,你看什么都像钉子