impress.js初体验——前端装X利器

时间:2021-05-11 14:44:55

impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。其功能包括画布的无限旋转与缩放,任意角度放置任意大小的文字,CSS3 3D 效果支持等。同时,也支持传统 PowerPoint 形式的幻灯演示。目前 impress.js 是基于 webkit 浏览器(Chrome、Safari)开发,而在其它基于非 webkit 引擎,但支持 CSS3 3D 的浏览器也能正常运行。

      impreess源码已经发布在GitHub上,地址https://github.com/bartaz/impress.js

      官方demo地址http://bartaz.github.com/impress.js

OK,言归正传!看了两篇博客,自己也忍不住想要把 impress.js 分享一下,装X利器嘛,所以请原谅我在装X!相信大家通过第一段已经对impress.js有了大概的了解,没错,上面一段我是Copy的!(文章结尾会附上出处) 所以嘛,你懂的,我在装X!

当你习惯并开始厌倦使用PowerPoint来制作PPT的时候,impress.js的出现确实让人按捺不住内心对新鲜事物的尝试,不过前提是你得懂点前端知识会比较好。当然,如果你天资聪颖,那你就直接无视我然后行动吧!

在从GitHub上下载下来的文件里面你会发现怎么没有说明/使用文档,其实,他的使用说明全在html文件的注释里。但是呢,对于英文不好的童鞋,这般鸟语确实是折磨!我个人觉得其实原文阅读难度并不大,只要偶尔有道一下,阅读一遍后基本就可以懂了,下次直接忽略这些注释即可。但如果你还是受不鸟,这里有个别人已经翻译好的:

http://www.360doc.com/content/12/1207/15/176942_252688895.shtml

中文的demo:http://eyehere.net/wp-content/uploads/2012/11/impress_cn.html#/bored

虽然通过上面的链接基本可以学会使用了impress.js,但是我这里还是得大概总结一下!

首先将HTML简单搭建一下,先将impress-demo.css 和 impress.js 两个文件引入:

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>impress.js 使用方法</title>
<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 class="impress-not-supported"> <div id="impress"> </div> <script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>

body元素一般添加一个名为‘impress-not-supported’的class,这个class可以很方便的判断当前的浏览器是不是支持我们所需的css或脚本,若浏览器不支持,可以用这个类来显示一些回调的信息。虽然impress.js会检测并自动加上去,但是最好还是自己添加上去比较保险哦!

当浏览器不支持时,我们可以加一个回调消息,仅在有`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>

创建一个id="impress"的wrapper(载体),一般直接用div就好,我们所有的场景都放在这里div里面。当然其他标签也可以,不过id名称必须是impress。

<div id="impress">
</div>

data-transition-duration 属性来改变切换场景的速度,默认是1000(也就是1秒)。data-perspective 属性来改变透视的深度,默认是1000。如果设置为0的话,就看不到任何3D效果了。一般情况下默认就行,也就是不需要设置了。

在wrapper内创建一个幻灯片只需简单地创建一个class="step"的<div>即可。<div>的id可有可无,当有id时url中的hash变化是随着id走,即使你没有给它定义,你依然可以使用 step-N 来找到这一幕(场景)。因为id属性仅仅是用来表示场景的URL的,事实上也不是必须的东西。

<div class="step">
一个场景
</div>

罗列一下数据属性

data-x ,data-y ,data-z : 它们定义了元素中心在画布的位置(即设置幻灯片的x,y,z坐标),默认是0;

data-scale :定义了元素缩放的比率,默认是1,data-scale为5则将会在你幻灯片原始尺寸基础放大5倍;

data-rotate :通过一个数字度数来确定旋转你的幻灯片,正数顺时针旋转,负数逆时针旋转;

data-rotate-x :3D场景用,相对x轴旋转多少度。(前倾/后仰);

data-rotate-y = 3D场景用,相对y轴旋转多少度。 (左摆/右摆);

data-rotate-z = 3D场景用,相对z轴旋转多少度,其实效果跟data-rotate 一样。

其实数据属性并不难,使用起来也很简单,主要还是你的想法创意有多牛,实现起来有多炫酷,这些才是你花功夫的地方!

拿demo的代码做为例子:

在下面这个场景里,我们给它设置了`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>

这一次我们写了一个`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>

我们还可以定义第三个坐标,就是`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>

全局预览,把所有的幻灯片都平行的展示出来,一般放在末尾:

<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>

最后,记得初始化:

<script>impress().init();</script>

好了,以上就是一些知识点总结,然后还提供了demo代码。当然,如果你想创建更加好玩或者炫酷的PPT展示,还是得发挥你的创造力,而不是仅局限于demo的效果!我自己也得去研究研究…

参考了此处:http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html