吉吉于

【JS】impress.js

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

关于impressjs:

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

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

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

204549 Y8DA 12

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