Write the Code. Change the World.

6月 28

初介

impress.js是国外一位开发者受Prezi启发,采用CSS3与JavaScript语言完成的一个可供开发者使用的表现层框架(演示工具)。

普通开发者可以利用impress.js自己开发出类似效果的演示工具,但性能比基于Flash的Prezi更优。其功能包括画布的无限旋转与缩放,任意角度放置任意大小的文字,CSS3 3D效果支持等。同时,也支持传统PowerPoint形式的幻灯演示。

目前impress.js是基于webkit浏览器(Chrome、Safari)开发,而在其它基于非 webkit引擎,但支持 CSS3 3D 的浏览器也能正常运行。

演示 && 下载

官网:http://impress.github.io/impress.js/#/bored

王巍:http://about.onevcat.com/#/welcome

正逍遥:http://zhengxiaoyao0716.github.io/FunCodeImpress/#/bored

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

配置使用

按照下边的结构,准备好html页面。

  1. id="impress"为内容的载体(wrapper)。所有的动画内容(div)到包含在里边。
  2. class="impress-not-supported"是当浏览器不支持时,显示给用户的信息。
  3. 记得引入css以及js
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>impress.js</title>
    <link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body>
    <div class="impress-not-supported">
    </div>
    <div id="impress">

    </div>
    <script src="js/impress.js"></script>
    <script>impress().init();</script>
</body>
</html>

创建一个页面,只需在载体中class="step"<div><div>的id可有可无,当有id时url中的hash变化是随着id走;反之就是step-[num],如:xx/xxx.html#step-3

<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
    <q>仿佛有<b>痛楚</b>如果我晕眩,那是因为幻觉丰盛,能量薄弱。</q>
</div>

一个step就是一个页面,也就是一屏。

数据属性

data-x div的x坐标
data-y div的y坐标
data-scale 通过指定一个值来进行缩放,data-scale为5则将会在你幻灯片原始尺寸基础放大5倍
data-roate 通过一个数字度数来确定旋转你的幻灯片
data-rotate-x 为3D用,这个数字度数是它应该相对x轴旋转多少度。(前倾/后仰)
data-rotate-y 为3D用,这个数字度数是它应该相对y轴旋转多少度。 (左摆/右摆)
data-rotate-z 为3D用,这个数字度数是它应该相对z轴旋转多少度。

回调函数

首先你需要知道的是impress.js将按照元素顺序依次显示元素,你可以给每个元素指定id,播放时url栏中的id即为该页面id。你也可以不指定,impress.js将默认为你带上step-1, step-2
实质上impress.js并没有提供回调函数,但是正如我前面说过的,由于是源生的,所以我们可以修改源码,修改impress.js文件中279行如下:

var onStepEnter = function (step) {  
    if (lastEntered !== step) {  
        triggerEvent(step, "impress:stepenter");  
        lastEntered = step;  
    }  
    //页面进入时的触发事件  
    var url = location.href;  
    var stepId = url.substr(url.lastIndexOf('/')+1);  
    if(typeof goInStep == 'function'){  
        goInStep(stepId);  
    }else{  
        return false;  
    }  
};  

// `onStepLeave` is called whenever the step element is left  
// but the event is triggered only if the step is the same as  
// last entered step.  
var onStepLeave = function (step) {  
    if (lastEntered === step) {  
        triggerEvent(step, "impress:stepleave");  
        lastEntered = null;  
    }  
    //页面离开后加个触发事件  
    var url = location.href;  
    var stepId = url.substr(url.lastIndexOf('/')+1);  
    if(typeof goInStep == 'function'){  
        goOutStep(stepId);  
    }else{  
        return false;  
    }  
};  

新增两个回调函数,一个在页面进入时执行,一个在页面离开时执行,分别为goOutStep()goInStep()。 参数为该页面id或者默认给上的step-1之类的标志,其他需求请根据需要自行修改。

优缺点

  • 因为HTML+CSS都需要自己完成,位置和效果都得自己经手,视觉效果都由自己掌控。

  • impress在视觉表现上确实非常强大,比起同样做演示文稿的 html5slides 和 deck.js, impress.js的复杂度上高了不少,而且如果想把演示文稿排版的好看可能需要花掉大量的时间。

类似功能

nodePPT: https://github.com/ksky521/nodePPT

webSlide: http://36kr.com/p/88093.html

html5slides: http://html5slides.googlecode.com/svn/trunk/template/index.html

deck.js: http://imakewebthings.com/deck.js/

All: http://www.360doc.com/content/14/0401/10/176942_365396922.shtml

参考

http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html

http://www.tuicool.com/articles/YneMB3F

http://blog.csdn.net/zhangsheng_1992/article/details/51545030

发表评论

电子邮件地址不会被公开。 必填项已用*标注