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

Posted by miskcoo on October 1, 2014

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
	<head>
		<title>Miskcoo's Impress.js Demo</title>
		<meta content="Content-Type" charset="utf-8" />
		<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />  
	</head>
	<body>
	<div class="impress-not-supported">
	</div>
	<div id="impress">
	</div>
	
	<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
	<script>impress().init();</script>
	</body>
</html>

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

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

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

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

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

1
2
3
4
5
6
7
8
9
<div class="step" data-x="0" data-y="0">
这是第一张幻灯片,坐标是 (0, 0) 会出现在屏幕中间
</div>

<div class="step slide" data-x="1500" data-y="0">
这是第二张幻灯片,当切换的时候,屏幕会平滑地从 (0, 0) 滑动到 (1500, 0)
</div>

<div id="overview" class="step" data-scale="3"></div>

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

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

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

1
2
3
4
<div class="step" data-x="1500" data-y="1500" 
     data-rotate-x="45" data-rotate-y="30" data-rotate-z="60">
这就是一个旋转了的幻灯片
</div>

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

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

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

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