前几天用impressjs做的演讲稿，效果挺好的。

关于impressjs:

impress.js 是一个Javascript程序包，它的功能是让你制作出令人眩目的内容展示效果，

主要里利用了CSS 3D Transforms 里的旋转，扭曲，缩放等特性，所以，只有最新版的Firefox，

或谷歌浏览器或苹果浏览器才能看到它产生的效果，好像在还未出世的IE 10 浏览器里也可以用。

Github:

https://github.com/bartaz/impress.js

Demo:

http://bartaz.github.io/impress.js/#/bored

使用方法:

我这里用的sublime text2 ，装了一个emmet插件，前身是zen coding，

直接生成html5的骨架，然后就可以顺滑的写演讲稿了~ 很爽。

如果你的需求比较低，直接copy官方的demo就行

1.

在body元素结束前引入impress.js文件，这是Impress包引入到你的项目中。

2.

引入impress-demo的css，除非你想自己再写而且有时间

3.

接下来我们将创建一个wrapper包含幻灯片，这里用一个简单的id为 ‘impress’<div>元素。

<div id=”impress”>

</div>

4.

现在你可以看到创建一个新的幻灯片是多少的容易了。每个幻灯片是一个<div>元素 (在wrapper内) 其class名称叫做’step’。

<div class=”step”> My first slide </div>

5.

数据属性表示它不是活动幻灯片时你的幻灯片的属性，您可以使用下面的数据属性：

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

6.基本了解这些就可以开工了~~

对比这demo里的效果，写吧~~基本上几分钟就入手了。

高端霸气上档次的演讲稿~~

转载请注明：于哲的博客 » 【JS】impress.js