Impress.js中文教程

By | 2012/11/15

我假设凡是对这篇文章有兴趣的朋友都是知道impress.js的,如果不知道,您可以搜索一下,或者更直接的,请往下看,您就明白了。

impress.js中文范例 —— 这个可一定要看一下,不然哪有动力应付下面一堆蚊子?

或许有些朋友在寻找如何使用impress.js这个奇妙的工具的教程,实际上,它的范例文件中的注释就是最好的教程了,不过里面是鸟……英语,所以我翻译了一下,希望对大家有所帮助。

<!doctype html>

<!--
    
    你想知道如何使用impress.js?
    
    你已经开始了最初又及其重要的一步 —— 你正在阅读这份代码。
    这就是 impress.js 展示的构成方式 —— 使用HTML和CSS。
    
    相信我,你必须使用精确的使用HTML和CSS来高效的使用impress.js。
    更重要的是,你得有艺术细胞,因为在impress.js展示中,我们没有准备默认的css样式和模板。
    
    你得用你聪明的大脑和勤劳的双手来规划和构筑这个东西。
    
    那么……

    你还是想知道如何使用impress.js么?
    
-->

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>impress.js | 使用现代浏览器中css3的tranforms和trasitions特性进行展示的工具 | by Bartek Szopka @bartaz | 翻译ed by xishui @ //eyehere.net</title>

    <!--
        
        Impress.js不调用任何外部的样式文件,脚本会增加所有必要的展示用样式。
        
        下面这个样式文件是为了演示用的,查阅一下它可以搞明白如何对impress.js中的元素渲染、
        已经显示一些回调的样式,不过我可不希望你直接把它用到你自己的展示中。
        
        哥们儿(or姐们儿?),来点创意,我们可不能让所有的impress.js看起来都是一个模子里处理的,对吧!
        
        当你开始制作自己的展示时,把它删了,从头开始吧,这是件有趣的事情。
        
    -->
    <link href="css/impress-demo.css" rel="stylesheet" />
    
    <link rel="shortcut icon" href="favicon.png" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>

<!--
    
    Body元素往往会被impress.js设置一些特殊的class,这个可以很方便的判断当前的浏览器是不是支持
    我们所需的css或脚本。
    
    一个非常有用的class名称是 `impress-not-supported`。这个class意味着这个浏览器不支持impress.js
    所要求的特性,所以你可以用这个类来显示一些回调的信息。
    事实上倒也不是一定要手动的加上这个class,因为impress.js检测到以后会自动加上的,不过万一你的
    浏览器连JavaScript都不能执行,还是预先加上比较保险。
    
    当impress.js检测到你的浏览器足以运行,这个class名就会被移除。
    
    事实上boday的类名也会根据当前的演示场景改变,我们会在后面说到,就在"hint"的内容里。
    
-->
<body class="impress-not-supported">

<!--
    比如,我们加一个回调消息,仅在有`impress-not-supported`类名的body下显示。
-->
<div class="fallback-message">
    <p>尊驾的浏览器太老土啦!<b>无法满足impress.js的要求</b>,现在你只能看到一些最朴素的演示画面。</p>
    <p>为了欣赏漂亮的演示画面,请使用先进、优雅、快速、美丽、免费的现代浏览器,比如 <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b></p>
</div>

<!--
    
    现在我们开始接触impress.js的核心了。

    我们得把所有的演示步骤包裹起来,在这个舞台里impress.js的魔法才可以施展。
    倒不一定是个`<div>`标签,只不过`id`一定得是`impress`。
    
    可能现在还用不到,不过我还是要给你说一些可以用在这个舞台上的选项。

    用类似`data-transition-duration="2000"`这样的属性来改变切换场景的速度,默认的话,是1000(也就是1秒)。

    也可以设置`data-perspective="500"`来改变透视的深度,默认是1000。如果设置为0的话,美丽的3D效果
    就离我们远去了。
    这个事情还是颇为复杂的,你可以参考下面的地址了解更多(还是英文的):
    https://developer.mozilla.org/en/CSS/perspective
    
    不过就像我刚刚所说的那样,你现在应该还用不着这些设置 —— 默认的就很好了。
    
-->
<div id="impress">

    <!--
        
        接下来就要发生一些有趣的事情了。
        
        所有在`#impress`中并且有`step`类名的元素都是一个场景。这些个场景会被impress.js定位、
        旋转和缩放,我们的‘镜头’会一一的展示它们。
        
        位置信息也是通过data属性设置的。
        
        在下面这个场景里,我们给它设置了`data-x="-1000"`和`data-y="-1500`的属性。
        这意味着这个元素的**中心**(是的,确实是中心)在整个幻灯片的(-1000px, -1500px)处。
        
        这个场景没有旋转和缩放。
        
    -->
    <div id="bored" class="step slide" data-x="-1000" data-y="-1500">
        <q>你是不是觉得传统的幻灯片都 <b>弱爆了</b></q>
    </div>

    <!--
        `id`属性仅仅是用来表示场景的URL的,事实上也不是必须的东西。
        即使你没有给它定义,你依然可以使用`step-N`来找到这一幕。
        
        比如说下面这个场景就可以叫做`step-2`。
        
        这个URL的锚部分就应该是`#/step-2`。
        
        你也可以在一个链接里使用`#step-2`,这可以直接定位到这个场景。
        
        请注意,`#/step-2`虽然在链接中也可以使用,但是并不是推荐的,使用`#step-2`可以在
        更广泛的情况是使用(比如impress.js压根儿没起作用的时候)。
        
    -->
    <div class="step slide" data-x="0" data-y="-1500">
        <q>你有没有想过,在 <strong>现代浏览器</strong> 光辉下,我们可以不再受限于 <strong>老旧浏览器的残忍压迫</strong></q>
    </div>

    <div class="step slide" data-x="1000" data-y="-1500">
        <q>你难道不想使用 <strong>华丽的舞台效果</strong><strong>震惊你的观众</strong> 吗?</q>
    </div>

    <!--
        
        这是一个缩放的效果。
        
        同样的,我们又使用了`data-`属性,这一次我们写了一个`data-scale="4"`,这样一来,
        这个元素就会被放大成原来的4倍。
        如果从这个场景退出,它会被还原原来的大小(缩小4倍)。
        
    -->
    <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
        <span class="try">那么,您应该尝试一下</span>
        <h1>impress.js<sup>*</sup></h1>
        <span class="footnote"><sup>*</sup>美式的小幽默,无视</span>
    </div>

    <!--
        
        这个场景使用了旋转。
        
        写法你一定猜到了,我们使用了`data-rotate="90"`属性,这就意味着这这个场景会被
        顺时针旋转90度。
        
    -->
    <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
        <p>它是一个 <strong>演示工具</strong> <br/><a href="http://prezi.com">prezi.com</a>启发 <br/>
        基于现代浏览器中 <strong>强大的CSS3特效</strong> 开发而成</p>
    </div>

    <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
        <p>它可以具象化您 <big style="font-size:larger">伟大</big> </p>
    </div>

    <!--
        
        现在事情变得更欢乐了,我们开始进入三维的世界!
        
        除了`data-x`和`data-y`以外,我们还可以定义第三个坐标,就是`data-z`。
        我们在下一个例子上加上了`data-z="-3000"`,意味着这个场景离我们有3000px那么远。
        
    -->
    <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
        <p>或者 <span style="font-size:smaller">细致</span><span class="thoughts">想法</span></p>
    </div>

    <!--
        
        下面这个场景并没有展示新的data属性,但是你应该可以看到这里面有些字是动的。
        这些是非常基础的CSS transition动画,当这个场景开始后,我们就让它们开始播放。
        
        在演示刚开始的时候,所有的step元素都有一个`future`类,也就是说它们还没有开始上演。
        
        当舞台进入某个场景,这个场景被贴上了`present`的类标签,这就是动画的秘密——
        字符在`present`类里面发生动画。
        
        当场景完毕,`present`类就被移除了,写上一个`past`的类。
        
        简而言之,每个场景都会具有`future`、`present`、`past`中某一个的类,只有当前
        播放的step元素具有`present`类属性。
        
    -->
    <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
        <p>它在一个无线大的画布上,展示了 <b class="positioning">定位</b> , <b class="rotating">旋转</b><b class="scaling">缩放</b> 的特效</p>
    </div>

    <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
        <p><b class="imagination"></b>有多大,<b>舞台</b>就有多大</p>
    </div>

    <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
        <p>想知道更多吗?</p>
        <q><a href="http://github.com/bartaz/impress.js">查看源码吧</a>, 兄台!</q>
    </div>

    <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
        <p>哦,还有一件事情……</p>
    </div>

    <!--
        
        最后我们演示一下impress.js强大的灵活性。
        
        你不仅仅可以再3D空间中定位一个物体,同样的也能在3D中旋转一个物体!
        所以我们这里沿着X轴旋转-40度(逆时针旋转40度),沿着Y轴旋转10度(顺时针)。
        
        当然你也可以沿着z轴旋转`data-rotate-z`——我想你猜到了,这和`data-rotate`是一个效果。
        
    -->
    <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
        <p><span class="have"></span> <span class="you">有没有</span> <span class="noticed">注意到</span> <span class="its"></span> <span class="in"></span> <b>3D<sup>*</sup></b>的?</p>
        <span class="footnote">* prezi可没这能力</span>
    </div>

    <!--
        
        我们最后来整理一下所有的属性:
        
        * `data-x`, `data-y`, `data-z` —— 它们定义了元素中心在画布的位置,默认是0;
        * `data-rotate-x`, `data-rotate-y`, 'data-rotate-z`, `data-rotate` —— 它们定义了元素
            沿着指定轴旋转的角度,默认是0;`data-rotate` 和 `data-rotate-z`是一回事;
        * `data-scale` —— 定义了元素缩放的比率,默认是1;

        这些值会被impress.js读取并写入CSS的transformation变化,你可以在下面网址查看更多信息:
        https://developer.mozilla.org/en/CSS/transform
        
    -->
    <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
    </div>

</div>

<!--
    
    Hint其实和impress.js没有半点关系。
    
    不过它演示一种创造性的使用impress.js的方法。
    
    当某一个场景显示的时候,它会获得`active`类属性(译注:确实,除了上面的present以外还有一个active),
    同时body元素会有一个`impress-on-ID`(ID就是当前显示的场景的id)的类...
    听起来很让人迷惑,举个栗子,当我们的第一张幻灯片显示的时候,它的id是`bored`,那么我们的body
    就有一个叫做`impress-on-bored`的类名。
    
    我们就是用这个类来显示下面的Hint,查看一下CSS文件,我们延时的显示了操作方法。
    
    ...
    
    当然这里面还有一些JavaScript的代码…… 孩子,千万不要再家里模仿这样的做法:)
    我们只是为了演示对应触摸设备的提示而随便写写的,你应该把这代码写到一个独立的JS文件里,
    而且这个演示也应该放在HTML里的某个地方,而不是写死在代码里。
    
    不过我只是随口说所;)
    
-->
<div class="hint">
    <p>使用空格或者方向键来移动</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) { 
    document.querySelector(".hint").innerHTML = "<p>向左或向右拖动屏幕来移动</p>";
}
</script>

<!--
    
    最后,但远远不是结束。
    
    为了让上述的动作顺利进行,我们必须在页面里包含impress.js这个文件。
    建议你使用一个压缩过的文件。
    
    我这里包含了一个未压缩的版本,这样可以增加可读性(译注:为了省流量,我用了压缩的)。
    
    你同时还需要使用`impress().init()`函数来初始化impress.js,你应该在最后调用这个函数。
    并不仅仅因为这是个好习惯,而且这样会保证当页面加载完成后执行。
    当然你可以使用“DOM ready”事件,但是我比较懒;)
    
-->
<script src="js/impress.js"></script>
<script>impress().init();</script>

<!--
    
    `impress()` 函数给了你一个控制演示API的方法。
    
    把结果放在一个变量里:
    
        var api = impress();
    
    这样你就可以使用几个可以使用的方法:
    
        `api.init()` - 初始化演示;
        `api.next()` - 播放下一个幻灯片;
        `api.prev()` - 回到上一个幻灯片;
        `api.goto( idx | id | element, [duration] )` - 通过知道那个id或者DOM播放指定的幻灯片
                可以指定转换时间(单位毫秒),当然时间可以是缺省的。
    
    你可以随时再次调用`impress()`来再一次获得这个API,类似`impress().next()`当然也是可以的。
    不用担心,这不会再一次的初始化impress。
    
-->

</body>
</html>

<!--
    
    OK,现在你或多或少的了解impress.js了,但是在你开始之前……
    
    你从GitHub上复制了代码(译注:或者你从我博客上复制了代码)?
    
    你已经在编辑器里打开了它?
    
    雅美蝶!

    这不是你创造你的演示的正确方法,这只是个代码,你的想法才是好的演示的根本。
    
    所以,如果你想做个好演示,取来一张纸一支笔,然后关了你的电脑。
    
    描、绘、写,现在纸上进行一场头脑风暴,试着做一个思维导图,这个才能帮助你怎样更好的
    创建impress.js的作品。
    
    当你在纸上完成了工程,再回到impress.js吧,一开始就用它毫无意义,只是浪费时间而已。
    
    如果你觉得我在胡扯,去看看一本叫做"Presentation Zen"(中译《演说之禅》,貌似还没有中文版)
    的书吧,这本书能给你更多更好的创建演示的方法和知识。
    
    请虚心接受我的意见,“因为你都不知道该说些什么,impress.js更加不知道”。
    
-->

<!--
    
    这里是作者的一些碎碎念,就不翻啦~
    欢迎各位留下宝贵意见大家相互交流[//eyehere.net/impress-js-chinese-course-tutorial]
    
-->

impress.js虽然真的很不错,但还远远说不上尽善尽美,比如它还没有办法对一个幻灯片的内容做到逐个显示的功能,不过我看大约半个月前作者开始做这方面的工作了,等新版本放出来以后,我会再追加上去的~

对了,感觉用纯手工的方式制作,确实还是很辛苦的,所以有好心人制作了GUI工具帮助你创建演示,我找到了ImpressionistStrut,个人试用下来,还是觉得Strut更好用,你也可以实际尝试一下

再PS,后来发现有人在Github上发布了中文版了呀,嘛,就当学习了^_^

4 thoughts on “Impress.js中文教程

  1. ww

    不错不错,我才给我一个同学做了个英语的PPT

    Reply
  2. Jason

    怎么使用其他的插件呢? 比如chart.js mathjax.js?

    Reply
  3. Pingback: impress.js _IT教程屋

ww进行回复 取消回复

您的电子邮箱地址不会被公开。