impress.js初体验
概述
如果你已经厌烦了使用PowerPoint制作PPT，那么impress.js是一个非常好的选择，用它做的PPT更加直观，效果也非常的不错。装X是需要一定代价的，不过如果你是个前端爱好者那么一切就没问题了。当然如果你能勉强明白HTML和CSS也没问题，看看这篇文章 + 一点点实践（把官网上的例子拿来改改）即可...
impress.js 是国外一位开发者受 Prezi 启发，采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具，但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，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
因为在其项目网页中却没有找到说明文档&使用文档，所以这篇文章将一步一步创建一个较初级的演示文稿，我们接着往下走。
请准备好现代浏览器：Google Chrome(效果最佳)、Safari或FF.
*我的IE10不支持，不知道为什么很多资料上写着IE10也能支持，背了个催。
配置
- html5页面结构先准备就绪
- 创建一个id="impress"的wrapper(载体)，直接div就好，其他标签同样也可以
- 在body标签结束前引入impress.js文件并且调用
- class="impress-not-supported"是当浏览器不支持时显示给用户的提示信息，降级处理你懂的，不多解释哈
<!doctype html>
<html>
<head>
<title>darren - Impress demo</title>
<meta charset="utf-8" />
<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div class="impress-not-supported">
</div>
<div id="impress">
</div>
<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>
- 在wrapper内创建一个幻灯片只需要新建一个class="step"的<div>即可。<div>的id可有可无，当有id时url中的hash变化是随着id走；反之就是step-[num]，如aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMcAAAAfCAIAAADcCk7TAAAEz0lEQVR4nO1c25WjMAxVXRREPfRgaqAHaIEy9sSSz3ywH5bfD0wmTCYMOtnFWJJ1JV9jk+xZIEIiQkIibmohIkQygkiIhISIaByMln2NMxuylbljD9QmhOxmw3CnPwx3ojVmA/JgsZ8XkqF6+XhNpdTX15dSikgZIVJEihQRkSKlFDmt7lC62xqylbljD9ImitiNTBju9IfhTrLGbKA8WOznhWSo3HbweFgiG+7dqQF6QtggTUbOlhmyPxaVFKW+/KiU9355ahvAH/wkZcrPGiAiSolSIkopEVHyBSVKKaWns1ftKlGyGTtJNB9ticZNu2oXrbF27GhCI7elaSPqcGYIi85qPUCMGO0AJ6a2AVw1tdKsbQCNqYFM5CHlI+11ykZ51NqPh5QP050f8+H9KY/9SLsqMF+Y2gaQeF0ktVJ7A2hMDcwaQMs+Y8D8t230nNGqnN40vGWrqWvXEy8TiW5ADP15ZVhIHhAPh1ubbsWiH9L3Pyk1XrhXTK00a3ohtaQG4ziOYhyFuYpxHIXpEaMWwd3cKYQYxRj0CTGa7lGwv+BRhR5GeBFGL6KNJGy3F9jAiTrsyCJ2CW9PS20DuGpqpVnbABpTg+2W5wT+XumaU/57pXmV3KyqGJ4K48pys6pieCqMK8vNqorhqTCuLDerKobR/dQDdMP6ajy/UKYeoJ+e9y+U+MoFPMqqdegA+klfr1qUUH6OVevQcaSpzxXXFP8tsg4dWNmZ+YOsemteB+S7TGgeqyFQO6umnsdah+4ZUr0y63Roh2j3kXKMVevQfcYD6iNZZWfOPbN82S/+iazKRKpgOcQqf6y43U/uEdkNa/DEdJmyl/809cqgtZNWWtC+cWbLiFXBkxriFZYbZ+ozWEK1n52xygZKS7EB1EqRDpQFH09kjPlo1vWJ2JUXsioYKmaVvbNAGeXUe4i5GBFjIq2fXhAzfPJWVOmqLRqHSQ2ZSgXZ6btyoLQUW6UUMbkr+19pRfuY27PemYgdeeUOGGIuZhkVL8O/ALt/WEi0yVbgdoGKakvqWzZuOChG2YUeOVaFpdgAWooW7H95Upk4RczNWe9NRE00/+pbcTuroqDpDphVhbkUjqjZ58ZW3Br6qapKEdWMja5cpsxc1VkVlmIDqJfCbWaRRNtYmk+MuT3r+kQUzwprdDgpSTuruvKiPJVV+eWzs7Iy9a0tQ1vGXL3OZpW1LH6pkMWfwXwg6/pE5ITjNW2S7axKX1ieZFV5688dNUqJ1mtQR1RxylTtR1hV2/9qL3/JUa0x6/pEFOybX/8PPKvKzD7IqmhSwrswTHyIXIcuOF3kVaW9NGO8Dn2w1N2bXGmuUlbFb2pPsMpxyT6zSuUsYT6S9d5EJNK2LK0cOFele/izO+BUeJ/NYq98p1v7utecVrJfUCTvFjnbJlbFgZ7eAYuSs8thPp51eSJiyR/Ryuh/+Nflg5y/hHzv1+Xk24LXyLkTcbPqdPkOq077hexm1YfLr/yXMDerPlxuVlUMTwJwffmVrDpXbladLjerKobLMi/zsizzsszzPC+LbpsL95hO38JqWKX/Mu15NjfRiGZYE1QrZt2eF+c1B36zD9T0+hBmTiHEfFpqG8BVUyvN2gbQmBr8u+Upeft/pPGWT2Nx/gOWeqFbBwA7NAAAAABJRU5ErkJggg==" alt="" />
<div class="step">
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轴旋转多少度。
创建
数据属性那段是你接下来需要重点打交道的，接下来开始step by step创建一个演示文稿。
从一个初始的幻灯片开始，这个幻灯片已将它data-x和data-y数据属性设置为0，所以会出现在页面的中间。
<div class="step" data-x="0" data-y="0">
This is slide 1 - 【标题】
</div>
第二个幻灯片的data-x值为500、data-y值为0，活动的时候它将会向左平移(滑动)500px的地方。
<div class="step" data-x="500" data-y="-400">
This is slide 2
</div>
第三张幻灯片其data-x值不变，data-y位置为-400，这将会是从顶部400px处滑入屏幕。
<div class="step" data-x="500" data-y="-400">
This is slide 3
</div>
第四张幻灯片来个新花样，使用data-scale的值控制其缩放大小。data-scale="0.5"表示着它应该是一半的尺寸，当它变成活动的演示时将通过必需的倍数调节所有幻灯片的缩放尺寸，从这一步绚丽开始起步
<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>
第五张幻灯片旋转属性允许你旋转一个幻灯片到当前视图，幻灯片5被设置旋转90度，视觉效果微叼哈
<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5
</div>
第六张幻灯片开始3D style，可为每个维度的轴指定旋转属性(x,y,z)。x轴是横轴，意思是你可使事物倾斜(正值)或向后(负值)，y轴是竖轴，所以你可使事物向左摇摆(负值)或向右(正值)，z轴是纵轴，这将是旋转的东西向上（负值）和向下（正值）。
<div class="step" data-x="-1200" data-y="0"
data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
This is slide 6
</div>
以上6张幻灯片把数据属性内的值都过了一遍，一张略high的演示文稿就呈现在我们眼前。你可以以你的想象力用不可思议的和令人惊奇的方式合并这些效果来创建你自己的幻灯片展示风格。
- 全局预览
个人超赞这个视觉体验，把所有的幻灯片都平行的展示，排列的合理会非常帅气，使用方式就是在幻灯片6后面插入一段html.
<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>
随着你幻灯片位置的不同所以全局预览的值也会不一样，拿着结尾处的demo一点一点调整找感觉，希望你会喜欢！
完成后请记住它，用它做的不只局限于此，唯一的限制是你的创造力！
个人体会
正因为我们是前端，所以用前端技术做做各种尝试没什么不好，impress更可以让我们的演示文稿更有新意，所以简单了解下绝对是值得的，学习是最好的投资。
优点：
- 个人非常喜欢overview的功能
- 因为HTML+CSS都需要自己完成，位置和效果都得自己经手，视觉效果都由自己掌控
- 在我用过的同类产品中视觉效果最绚，CSS3+3D效果，直接给观众看晕:)
缺点：
- impress在视觉表现上确实非常强大，比起同样做演示文稿的 html5slides 和 deck.js， impress.js的复杂度上高了不少，而且如果想把演示文稿排版的好看可能需要花掉大量的时间.
*如果闲impress麻烦的朋友可以去看看 html5slides 和 deck.js的资料，视觉效果会稍差一些，不过上手会简单不少。 - 不要把3D和旋转用得太花哨、太绚，看的人会晕，恰当就好哈
以下是demo代码，初学者自己动手多改改感觉就好了。
<!doctype html>
<html>
<head>
<title>darren - Impress demo</title>
<meta charset="utf-8" />
<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div class="impress-not-supported">
<div class="fallback-message">
<p>你的浏览器<b>不支持</b> impress.js, 所以当前展示的是简化版。</p>
<p>为了获得更好的体验，请使用最新的 <b>Chrome</b>, <b>Safari</b> 或者 <b>Firefox</b> 浏览器。</p>
</div>
</div>
<div id="impress">
<div class="step" data-x="0" data-y="0">
Darren code - [标题]
</div>
<div class="step" data-x="500" data-y="0">
This is slide 2
</div>
<div class="step" data-x="500" data-y="-400">
This is slide 3
</div>
<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>
<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5
</div>
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
This is slide 6
</div>
<!-- darren code -->
<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>
</div>
<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>
<!doctype html>
<html>
<head>
<title>darren - Impress demo</title>
<meta charset="utf-8" />
<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div class="impress-not-supported">
<div class="fallback-message">
<p>你的浏览器<b>不支持</b> impress.js, 所以当前展示的是简化版。</p>
<p>为了获得更好的体验，请使用最新的 <b>Chrome</b>, <b>Safari</b> 或者 <b>Firefox</b> 浏览器。</p>
</div>
</div>
<div id="impress">
<div class="step" data-x="0" data-y="0">
Darren code - [标题]
</div>
<div class="step" data-x="500" data-y="0">
This is slide 2
</div>
<div class="step" data-x="500" data-y="-400">
This is slide 3
</div>
<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>
<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5
</div>
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
This is slide 6
</div>
<!-- darren code -->
<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>
</div>
<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>
突然想起一句话作为文章总结吧：“当你有把锤子的时候,你看什么都像钉子”。
转http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html
impress.js初体验的更多相关文章
- impress.js初体验——前端装X利器
impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具).其功能包括画布的无限旋转与缩放,任意角度放置 ...
- node.js 初体验
node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...
- 范仁义web前端介绍课程---4、html、css、js初体验
范仁义web前端介绍课程---4.html.css.js初体验 一.总结 一句话总结: html:就是网站的骨架,比如div标签.a标签等 css:style标签或者style属性里面的就是css j ...
- Knockout.js初体验
前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...
- vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
- vue.js——初体验
看到最近很火的vue.js,于是开启了自己人生中首篇翻译之路,才意识到这个纯英文版的的确没有中文的通俗易懂~~~~~~不过, 还是硬着头皮把这篇英文版的博客给翻译完了,希望可以帮助自己的同时也方便别人 ...
- Node.js初体验
1.Node.js是什么 [1]Node是一个server端 JavaScript 解释器,但是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了.总结:水深不深我还不知道, ...
- MVC + Vue.js 初体验(实现表单操作)
Vuejs http://cn.vuejs.org/ Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
- Laravel 5.4+Vue.js 初体验：Laravel下配置运行Vue.js
生产材料PHP:PHP 5.6+Laravel 5.4:https://github.com/laravel/laravel/releases/Composer:http://getcomposer. ...
随机推荐
- Java语言开发环境搭建
在使用任何计算机语言开发之前,都要搭建其开发环境. 一.明确什么是JDK.JRE. 二.下载JDK 三.安装JDK 四.配置环境变量 五.验证是否成功 一.什么是JRE.JDK. JRE(Java R ...
- 基于Spring DM管理的Bundle获取Spring上下文对象及指定Bean对象
在讲述服务注册与引用的随笔中,有提到context.getServiceReferences()方法,通过该方法可以获取到OSGI框架容器中的指定类型的服务引用,从而获取到对应的服务对象.同时该方法还 ...
- Spring之IOC讲解
一.SpringIOC的好处: ioc的思想最核心的地方在于,资源不由使用资源的双方管理,而由不使用资源的第三方管理,这可以带来很多好处. 1.资源集中管理,实现资源的可配置和易管理. 2.降低了使用 ...
- JAVA函数的参数传递
JAVA开发过程中写函数都是不可避免的于是乎参数传递经常会困扰我们,特别是有C/C++功底的童鞋总会纠结于"java到底是值传递还是引用传递?" 先来一段代码(和程序员交流最好的果 ...
- qppium 原理解析
Appium是 c/s模式的appium是基于 webdriver 协议添加对移动设备自化api扩展而成的webdriver 是基于 http协议的,第一连接会建立个 session 会话,并通过 p ...
- groovy hello world
安装方法见官方文档http://groovy.codehaus.org/Installing+Groovy 用新一个文件HelloWorld.groovy,以utf8的编码保存,内容为: printl ...
- 前端学PHP之正则表达式基础语法
前面的话 正则表达式是用于描述字符排列和匹配模式的一种语法规则.它主要用于字符串的模式分割.匹配.查找及替换操作.在PHP中,正则表达式一般是由正规字符和一些特殊字符(类似于通配符)联合构成的一个文本 ...
- ios 相机调用之读取相册
UIIamgePickerControllerr可以从照片库中读取一张图片到咱们应用程序中来 步骤: //创建图片判断图片库是否可以使用 if([UIImagePickerControll ...
- 卷积神经网络(CNN)前向传播算法
在卷积神经网络(CNN)模型结构中,我们对CNN的模型结构做了总结,这里我们就在CNN的模型基础上,看看CNN的前向传播算法是什么样子的.重点会和传统的DNN比较讨论. 1. 回顾CNN的结构 在上一 ...
- bootstrap初级
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" ...