制作网页版幻灯片——impress.js

impress.js 是一个基于 CSS3 运行在现代浏览器上的表现框架,它的灵感来源于 prezi.com。如果你有一点 web 的基础,你可以用它来制作幻灯片,而且效果十分绚丽,你可以轻松地做出旋转、划动、缩放等特效。因为它是遵循 MIT 和 GPLv2+ 协议的,所以你可以对 impress.js 的源码做任意修改。而且,还有在线的所见即所得的编辑网站 Dyapos 以及 Strut

这里有 impress.js 的示例,打开后你将会看到这样的画面

Example of impress.js

等不及了?那么,我们现在就来制作一个 impress.js 幻灯片

首先要的是基本的 HTML5 结构,以及 impress.js 的包含

这里的 CSS 文件用的是官方例子中的,当然你也可以自己定制,然后在文档末尾,包含了 impress.js 的 Javascript 脚本,之后调用 impress().init(); 来初始化整个幻灯片

中间的 <div class="impress-not-supported"></div> 以及 <div id="impress"></div> 分别是当浏览器不支持 impress.js 的时候显示出的信息以及幻灯片的容器(也就是所有的幻灯片都放在里面

要添加一张幻灯片,你只需要在容器内加上一个 <div class="step"></div> 即可,每个 div.step 里的内容都是一张幻灯片,它可以有一些额外的属性来指定它的位置(在 impress.js 中,幻灯片的位置是处于三维空间中的)

data-x
data-y
data-z
幻灯片的坐标,以像素为单位
data-rotate
data-rotate-x
data-rotate-y
data-rotate-z
幻灯片的旋转
data-scale 幻灯片的大小,如果是 3,那就是按照原来的小缩小 3 倍,或者理解成屏幕放大了三倍

好,现在来添加几张幻灯片

第二个幻灯片多了一个叫做 slide 的类,这是在 impress-demo.css 里定义的,效果就和官方样例左上角那三张白色的幻灯片一样

最后的那个 div#overview 是将全部的幻灯片显示,做一个总览,效果类似这样

Impress.js overview

我们还可以把幻灯片旋转,在过渡的时候会有很炫的效果

如果你把 data-rotate-x 之类的改成一个几千的值,那么它就会旋转好多圈

不知道你有没有注意到,调用完 impress() 返回的是一个类,实际上,你可以用一个变量来存储它,这个返回值可以用来控制幻灯片的播放,它有几个好用的成员函数

init() 初始化 impress.js 幻灯片
prev() 往前跳转一个幻灯片
next() 向后跳转一个幻灯片
goto(step_id) 跳转到 step_id 这个幻灯片

最后,和官方示例里说的一样 "The only limit is your imagination"

Miskcoo's Space,版权所有丨如未注明,均为原创
转载请注明转自:http://blog.miskcoo.com/2014/10/impress-js

miskcoo

顺利从福州一中毕业!感觉大学周围都是聚聚十分可怕QAQ 想要联系的话欢迎发邮件:miskcoo [at] gmail [dot] com

4 thoughts on “制作网页版幻灯片——impress.js

  1. Hi,你知道怎么让impress每一步都居左演示吗?就是贴着浏览器的最左边框,如果你知道的话,能告诉我怎么实现吗? Thnx for you. 我的邮箱:bailm@ourgame.com

    1. 话说什么叫贴着浏览器的最左边框?是每次都是从左边移出去右边移进来么0.0 如果是这样的话,那只要把每个幻灯片的 y 坐标设置成一样就可以了

Leave a Reply

Your email address will not be published. Required fields are marked *

NOTE: If you want to add mathematical formulas, use $$ to wrap them. For example, use $$x_0$$ to get $$x_0$$.

If you want to get a newline, hit Enter twice, that is, use double newlines to get a newline.