impress.js 是国外一位开发者受 Prezi 启发，采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，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

impress.js初体验——前端装X利器的更多相关文章

  1. impress.js初体验

    概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...

  2. 范仁义web前端介绍课程---4、html、css、js初体验

    范仁义web前端介绍课程---4.html.css.js初体验 一.总结 一句话总结: html:就是网站的骨架,比如div标签.a标签等 css:style标签或者style属性里面的就是css j ...

  3. node.js 初体验

    node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...

  4. Knockout.js初体验

    前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...

  5. Visual Studio 2015初体验——前端开发工作的问题

    前言 因为后台项目开发适用的VS2015,为了跟后台开发配合,前端部门也统一从VS2013升级到了VS2015. 因为C盘空间不足要先卸载,这里就不说卸载2013时花了多长时间,只说安装2015时用了 ...

  6. MVC + Vue.js 初体验(实现表单操作)

    Vuejs http://cn.vuejs.org/ Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  7. vue.js 初体验— Chrome 插件开发实录

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...

  8. vue.js——初体验

    看到最近很火的vue.js,于是开启了自己人生中首篇翻译之路,才意识到这个纯英文版的的确没有中文的通俗易懂~~~~~~不过, 还是硬着头皮把这篇英文版的博客给翻译完了,希望可以帮助自己的同时也方便别人 ...

  9. Node.js初体验

    1.Node.js是什么 [1]Node是一个server端 JavaScript 解释器,但是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了.总结:水深不深我还不知道, ...

随机推荐

  1. bash: ./t.sh：/bin/bash^M：损坏的解释器: 没有那个文件或目录

    有时候编写脚本时会出现类似标题列出的错误,这个问题大多数是因为你的脚本文件在windows下编辑过.windows下,每一行的结尾是\n\r,而在linux下文件的结尾是\n,那么你在windows下 ...

  2. Shell主要逻辑源码级分析 (2)——SHELL作业控制

    版权声明:本文由李航原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/110 来源:腾云阁 https://www.qclou ...

  3. bootstrap+html5+css3

    一.栅格和块阴影 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 堆叠的水平</title ...

  4. iOS 8 新特性介绍

    来源:nshipster.cn 发布时间:2014-07-06 阅读次数:2152 随便去问任何人,他们都会告诉你WWDC2014是近年来最为激动的回忆. 整个大会没有发布任何新硬件,它是一次史无前例 ...

  5. idea的svn插件中compare with the same repository version和compare with latest repository version的区别？

    Idea的svn插件中compare with the same repository version和compare with latest repository version的区别? 1.com ...

  6. iOS - 常用iOS的第三方框架

    图像:1.图片浏览控件MWPhotoBrowser       实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网络下载图片并进行缓存.可对图片进行缩放等 ...

  7. Thinkphp自定义工具类的使用！

    在使用Thinkphp做开发的时候,很多时候会用到一些自己写的类,为了方便管理,可以把这些类,单独放到一个文件里. 这就是自定义工具类: 首先在 Application 目录下新建 Component ...

  8. 通过JS模拟select表单，达到美化效果[demo]

    .m-form{background:#fff;padding:50px;font-family:12px/1.5 arial,\5b8b\4f53,sans-serif;} .m-form ul,. ...

  9. 磁盘 I/O 性能监控的指标

    指标 1:每秒 I/O 数(IOPS 或 tps) 对于磁盘来说,一次磁盘的连续读或者连续写称为一次磁盘 I/O, 磁盘的 IOPS 就是每秒磁盘连续读次数和连续写次数之和.当传输小块不连续数据时,该 ...

  10. CF734F Anton and School 构造+数论

    正解:构造 解题报告: 先放下传送门QwQ 这题首先要知道一个结论:(x&y)+(x|y)=x+y 还是能理解的趴? 所以我们把bi+ci就能得到∑a+n*a[i] 然后我们就能成功求出∑a ...