使用impress.js制作幻灯片_javascript技巧

上周看到一个朋友做了很炫的缩放式幻灯片，可能因为对此知识了解的不多，找了好久才找到几个web幻灯片工具。通过筛选决定用Geek的 impress.js 。

impress.js是一款新兴的幻灯工具，它的效果类似Prezi，但是拥有3D的功能，而且是在MIT&GPL协议下开源，对于有一定的Web开发基础的人而言，真是一个福音！只需要简单的用一些html指令，并加载impress.js就可以制作出一个很绚丽的缩放式幻灯。

制作时首先你需要写一些head，这和普通的Web是一样的，但body不同。由于目前impress.js只支持Chrome、Firefox和Safari这样的现代浏览器（摸摸IE……），所以需要一个fallback message。

  
Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.
  
For the best experience please use the latest Chrome, Safari or Firefox browser.

然后开始写真正的主体，impress部分。这部分必须完全被框在“ ”之中。

第一中幻灯片是step slide，这个和普通的幻灯片很像，就是一页一页的。可以用如下的方法添加

  第一页的幻灯片

你需要写的是id、data-x和data-y。id就是一个名称，而data-x、data-y则是坐标。事实上impress.js是给你了一个很大场地布景，而你需要的就是把一张张幻灯片扔进去，放到恰当的位置。然后它会按照你扔的顺序进行展示。其实坐标还有一个，是data-z，这个坐标可以把你带入3D效果之中，进行缩放。

另一种幻灯就叫做step，不像前一种有个死板的框，这种幻灯片彻底去掉了限制你的框，而是直接的写在背景上。请看下面这个例子：

  你看到的幻灯片由
  
impress.js
  给你呈现

这里特别的是有一个data-scale，表示这个幻灯片的大小，你可以把一页做得非常大或者非常小，来提供一个缩放的反差。还有一个旋转功能：

  
这是一个 presentation tool 

  作者从 prezi.com 得到灵感

  利用现代浏览器CSS3 transforms and transitions的力量

上面的data-rotate就是表示旋转的角度。

最后，你可以提供一个hint，告诉用户需要使用键盘的方向键来控制整个播放过程。如果用户刚点开幻灯片而没反应，这个提示会自动浮现。

  
请用方向键控制

在页面的最后，你需要加载impress.js，我这里是直接引用作者的页面，但如果是离线的展示，建议下载下来使用。仅仅加载js是不够的，还需要用impress().init()来启动。

事实上这个工具功能还有很多，我只是学了一些最基本的功能。官网的建议是直接看他提供的index.html，里面有详细的注释告诉你有什么功能，我做了一个页面，也是从作者提供的index.html改出来的。虽然这些东西很简单，但做一个演讲使用的幻灯片，也已经足够好了。我做的页面放在Gist上，整体代码见本页最后。

当然类似的工具不能不提Prezi，它是这个创意的最初实现，不过据说不支持中文。国内腾讯AlloyTeam也开发了一个叫做 iPresst 的工具，可以说是傻瓜级的好东西，不过由于是社交网络式的，有点不够隐私。impress.js最大的缺陷就是太Geek了，如果能够有个所见即所得的开发工具，一定能够推广开来。

 
Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.
 
For the best experience please use the latest Chrome, Safari or Firefox browser.



 

  第一页的幻灯片：
是否尝试过这样幻灯？
  这种幻灯片最初由Prezi带给世界
 
 

  这种幻灯片通过ZUI的方式，彻底摆脱了传统幻灯片的“盒子限制”
  唯一限制你的是你的创意！
 
 

  后面还有更多惊喜！
 
 

  你看到的幻灯片由
  
impress.js
  给你呈现
 
 

  
这是一个 presentation tool 

  作者从 prezi.com 得到灵感

  利用现代浏览器CSS3 transforms and transitions的力量
 
 

  
将你的想法视觉化
 
 

  
请看impress.js
  

  开放的幻灯工具
 
 



 
请用方向键控制

以上内容就是我给大家分享的使用impress.js制作幻灯片，代码很简单，希望对大家学习有所帮助。