impress.js使用教程

标签: Html & Css View css3 | 发表时间:2012-01-05 16:39 | 作者:疯狂小强
出处:http://www.woiweb.net

Impress.js是一款基于 css3转换和过渡、工作于现代浏览器(Google Chrome或Safari (或 Firefox 10 或 IE10))、并受prezi.com的理念启发的演示工具。如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错。 查看效果

impress

Impress.js 是一个非常棒的用来创建在线演示的 javascript库,但在其实际的项目网页中却没有说明文档。这篇指导将会帮你开始并创建一个简单的幻灯片演示,但完成后请记住它,用它做的不只局限于此,唯一的限制是你的创造力!

为你准备的可用的教程: 请在GitHub上查看下载

必需条件

想看有效的教程,请使用Google Chrome或Safari (或 Firefox 10 或 IE10)。Impress.js目前不兼容早期版本的Firefox或Internet Explorer。

配置

首要的事情是你要创建一个新的网页,我的是index. html并且里面配置了基本的head和body元素。

<!doctype html>
<html>
    <head>
        <title>Impress Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>

    </body>
</html>

在body元素结束前引入impress.js文件,这是Impress包引入到你的项目中。

<script type=”text/ javascript” src=”impress.js”></script>

接下来我们将创建一个wrapper包含幻灯片,这里用一个简单的id为 ‘impress’<div>元素。

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

创建幻灯片

现在你可以看到创建一个新的幻灯片是多少的容易了。每个幻灯片是一个<div>元素 (在wrapper内) 其class名称叫做’step’。

<div class="step">
    My first slide
</div>

虽然是创建一个简单的幻灯片,但你开始向你的幻灯片添加数据属性时还是很有趣的。数据属性表示它不是活动幻灯片时你的幻灯片的属性,您可以使用下面的数据属性:

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

动作中的数据属性

下面的幻灯片设置将指导你完成每个动作的数据属性。

让我们从一个初始的幻灯片开始,这个幻灯片已将它自己的x和y数据属性设置为0,所以会出现在页面的中间。

<div class="step" data-x="0" data-y="0">
    This is my first slide
</div>

第二个幻灯片的x值为500,但y值为0,这意味着当它活动的时候它将会出现在穿过x轴(向左滑动)500px的地方。

<div class="step" data-x="500" data-y="0">
    This is slide 2
</div>

简单吧?下一个幻灯片将同第2个幻灯片同样的x位置开始,但其y位置为-400,这将会是从顶部400px处滑入。

<div class="step" data-x="500" data-y="-400">
    This is slide 3
</div>

幻灯片4使用缩放值来显示一个幻灯片如何放大缩小。它的scale值为0.5,意味着它应该是一半的尺寸。当它变成活动的演示时将通过必需的倍数调节所有幻灯片的缩放尺寸。在这个示例中它的意思就是这个幻灯片应该正常显示(比例为1),它将需要被放大2倍 (0.5*2 = 1),所有的其他幻灯片也将被放大至2倍而变成2倍大小。

<div class="step" data-x="500" data-y="-800" data-scale="0.5">
    This is slide 4
</div>

旋转属性允许你旋转一个幻灯片到当前视图,幻灯片5被设置旋转50度。

<div class="step" data-x="0" data-y="-800" data-rotate="90">
    This is slide 5 and it rotates in.
</div>

最后,为3D转换,你可为每个维度的轴指定旋转属性(x,y,z)。

x轴是横轴,意思是你可使事物倾斜(正值)或向后(负值),y轴是竖轴,所以你可使事物向左摇摆(负值)或向右(正值),z轴是纵轴,这将是旋转的东西向上(负值)和向下(正值)。

组合

现在你了解了所有你需要给幻灯片展示添加动画效果的的数据属性,你可以以你的想象力用不可思议的和令人惊奇的方式合并这些效果来创建你自己的幻灯片展示风格。

<div class="step" data-x="-2600" data-y="-800" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4">
This is slide 7 and it has a 3D transition AND a scale.
</div>

不支持的浏览器

Impress自动检测浏览器支持与否,并且如果不支持则自动向wrapper“<div>”添加一个样式名称为“impress-not-supported”的样式,使用一些 css我们可以在浏览器上向人们显示不支持Impress的信息。

在开始的<div id=”impress”>添加下面的内容:

<div class="no-support-message">
    Your browser doesn't support impress.js.  Try Chrome or Safari.
</div>

然后,创建一个样式表单或引入一个已经存在的样式表单:

.no-support-message { display:none; }
.impress-not-supported .no-support-message { display:block; };

默认是隐藏消息的,但如果浏览器不支持时当前样式就会变成impress-not-supported。

玩得开心!

本教程介绍使用Impress.js创建自己的在线演示文稿的基本资料。整个例子您可在GitHub上下载和演示。

原文地址: http://www.cubewebsites.com/blog/guides/how-to-use-impress-js/

译文地址: http://www.woiweb.net/impress-js-tutorial/

推荐阅读:

11个CSS3按钮制作教程

10个不错的CSS3表单教程

常用CSS3动画效果合集-animate.css

非常有用的HTML5,CSS3的框架

18个明亮型纯CSS的绘图示例
无觅

相关 [impress js] 推荐:

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.

Js删除节点

- - JavaScript - Web前端 - ITeye博客
 方式一:传this参数调用方法:.  方式二:js方法中通过选择器获取节点:. //此处删除的是a节点 }. 方式三:通过jQuery方式获取节点:(尚未测试,有待测试. 此处a标签传this到js中,js通过this(即a节点)取parent(即p节点). (1)p.remove();可直接删除整个p节点.

JS游戏引擎列表

- sku - 酷壳 - CoolShell.cn
这里有一个网址收集了关于JS游戏引擎开发库的一个列表,转过来. 关于使用JS和HTML5做的一些小游戏,可参见《HTML5 小游戏展示》. Name Latest Release License Type Notes The Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源. 2 gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用 gTile 0.0.1 Tile based.

Deck JS: HTML5 幻灯片

- L - LinuxTOY
Deck.js 是一组开源的 JavaScript 类库,方便使用现代的 HTML5/CSS3/JS 技术创建幻灯片. 该软件十分适用于开源项目介绍,交互式的方式比单纯的文字说明更简洁易懂. 不废话了,赶紧前往该项目主页去体验 HTML5 时代的幻灯片吧. 分类: Productivity |. 收藏到 del.icio.us |.

JS三维模型库 Three.js

- Le - 开源中国社区最新软件
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象. 你可以在它的主页上看到许多精采的演示. 不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏) 演示:http://mrdoob.github.com/three.js/.

js Grid - 列表插件

- Bloger - 博客园-首页原创精华区
     js Grid - 列表插件.     1)Sponsor Flip Wall With jQuery & CSS一个非常不错的显示数据到网格里的插件. 点击后,缩略图会翻转,然后显示更多信息.      2)TableTree4J 是一个开源的基于javascript的树状菜单和表格控件,实用TableTree4J可以轻易实现带树状折叠效果的表格和树状折叠菜单.

Three js入门教程

- - 译言-电脑/网络/数码科技
译文来源: http://www.21haolou.com/articles/show/140. 我在自己的一些实验性项目中运用了 Three.js,它在处理浏览器3D效果方面表现优异. 通过Three js,你可以创建镜头(Cameras),物体(objects),光线(lights),材质(materials)等等,你还可以选择渲染器:可以使用HTML5的Canvas来绘制场景,也可选择使用WebGL或是SVG来渲染.

js对象深拷贝

- - ITeye博客
在做一个前台页面你的时候用到了一个自己写的List对象,在进行深拷贝的时候参考了网上的代码:. //对象扩展,tObj被扩展对象,sObj扩展对象. Object.extend(a,b);//a获得了b的所有属性. 我自己定义的list中没有定义constructor,所以执行sObj.constructor == Array会报错,我就修改为:.