最近受人之拖给即将毕业的学生做个小讲座，谈谈职业规划，面试技巧，抛弃了传统的PPT格式，给他们带来酷炫点的文稿演示。
这里只是个库使用的教程，该ppt是html形式，所以下面就html的布局进行了分解讲解
欢迎到此一游
这里能让你进一步学习你感兴趣的东西
____
_.' : `._
.-.'`. ; .'`.-.
__ / : ___\ ; /___ ; \ __
,'_ ""=-.:__;".-.";: :".-.":__;.-="" _`,
:' `.t""=-.. '<@.`;_ ',@:` ..-=""j.' `;
`:-.._J '-.-'L__ `-.-' L_..-;'
"-.__ ; .-" "-. : __.-"
L ' /.======.\ ' J
"-. "__" .-"
__.l"-:_JL_;-";.__
.-j/'.; ;"""" / .'\"-.
.' /:`. "-.: .-" .'; `.
.-" / ; "-. "-..-" .-" : "-.
.+"-. : : "-.__.-" ;-._ \
; \ `.; ; : : "+. ;
: ; ; ; : ; : \:
; : ; : ;: ; :
: \ ; : ; : ; / ::
; ; : ; : ; : ;:
: : ; : ; : : ; : ;
;\ : ; : ; ; ; ;
: `."-; : ; : ; / ;
; -: ; : ; : .-" :
:\ \ : ; : \.-" :
;`. \ ; : ;.'_..-= / ;
: "-. "-: ; :/." .' :
\ \ : ;/ __ :
\ .-`.\ /t-"" ":-+. :
`. .-" `l __/ /`. : ; ; \ ;
\ .-" .-"-.-" .' .'j \ / ;/
\ / .-" /. .'.' ;_:' ;
:-""-.`./-.' / `.___.'
\ `t ._ /
"-.t-._:'
因此，你将会了解如何使用impress.js的库
第一步，也是最重要的一步就是你需先读此份源码，了解impress.js是如何通过html 和 css的组合来build的
相信我，你仅需要很少的html\css的知识点就能很好的使用impress.js。
更重要的事，你会成为设计师，这里没有缺省的样式与布局，你需要通过你手工去设计和建造。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>这里是标题|程序小兵</title>
<meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com." />
<meta name="author" content="Bartek Szopka" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
impress.js并不需要依赖额外的stylesheets。它会添加他自身需要的样式来工作。
这个下面的包含的样式仅仅是给目前的演示例子使用。打开它去了解Impress.js类是如何在你目前演示中一步一步使用它。
但是，我并不想让你直接用在你的演示中。
为了更具创造性打造属于你的演示。我们不想所有的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用来设置一些有用的类名–允许你发现演示的兼容性和状态是用CSS还是其他scripts。
第一个非常有用的类则是 impress-not-supported.这个类作用是那些浏览器不支持impress.js的特征。因此
需要补充一些回退（向下兼容的）的样式在你的CSS文件中。
没有必要手工去添加这个元素。如果脚本检查到本浏览器不大友好的支持Impress.js，会自动添加进去，但是把他保存在此html里
意味着使用者在没有javascript时，同样会得到向下兼容的样式
当impress.js检测到所有浏览器支持所有的特征时，这个类将会被移除。
在body元素的这个类同样依赖当前演示的步骤。更多的细节随后会介绍。
<body class="impress-not-supported">
下面的fallback-message的属性仅仅在impress-not-supported属性被设置时才能显示。
<div class="fallback-message">
<p>你们的浏览器不 <b>不支持</b>impress.js, 因此，你目前的演示仅仅是个极简的版本</p>
<p>为了有更好的体验，请下载最新的 <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> 浏览器.</p>
</div>
下面就是用Impress.js的核心代码了。
这是你演示步骤的包装。在这个要素中，所有impress.js其他的事都会发生。不必是一个<div>，仅仅id值是非常重要的。
你现在可能还不需要它，但是这里有一些配置选项需要设置在这个element中。
为了改变slides之间切换的时间段，可以使用data-transition-duration="2000"语句来赋予一个数字毫秒值，缺省为1000ms(1秒)。
你也可以通过赋值data-perspective="500"一个数字像素来控制透明度的属性，缺省为1000。如果你不想要任何3D效果的话，可以设置为0.
你如果确定你自己理解CSS演示的工作原理想改变此值，可以来开发者论坛perspective
但是，我想说，你现在不需要用到它，所以别担心。在这个tag里的拐角，马上就会有一些简单但有趣的东西。
<div id="impress">
这里是趣事发生的开始
每一个演示的步骤必须在#impress里，且类名为step。这些step元素会被impress.js用来定位、旋转、缩放，其视觉效果通过camera作用将每一步的演示中展示出来。
通过data属性来传递定位信息。
在下面的例子中，我们在step元素中通过data-x=-1000和data-y=-1500来指定x和y的位置属性值。
意味着元素画布的中心点将会在x = -1000px 和 y = -1500px 所确定的位置中。
这时的它还不能旋转和缩放 。
<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
<q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
</div>
在这步的id属性是用来标识URL唯一值，但是它是可选的。如果它没有定义，会有个缺省值step-N。
下面的例子将会是第二步了
你也可以在连接后直接用#step-2来直接定位到这一步，方便快捷了。
请注意，这么写#/step-2（带斜线）也是可以正常工作的，但是不推荐这么写。用典型的id基准链接，如#step-2，可确保在向下兼容模式中都可以使用。
<div class="step slide" data-x="0" data-y="-1500">
<q>Don’t you think that presentations given <strong>in modern browsers</strong> shouldn’t <strong>copy the limits</strong> of ‘classic’ slide decks?</q>
</div>
<div class="step slide" data-x="1000" data-y="-1500">
<q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</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">then you should try</span>
<h1>impress.js<sup>*</sup></h1>
<span class="footnote"><sup>*</sup> no rhyme intended</span>
</div>
接下来要介绍的元素是旋转。
同样，标记也不会让人觉得奇怪，就是data-开头，我们用data-rotate="90"属性，意味着这个元素将会被顺时针旋转90度。
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>It’s a <strong>presentation tool</strong> <br/>
inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
</div>
<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
<p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
</div>
现在我们来整写更加让人激动人心的！我们添加3D模式。
同样用data-x和data-y，你可以在z坐标轴上使用属性data-z定义位置。
下面的例子中我们用data-z="-3000"，意味着这个元素将被离我们3000像素远的地方被定位到。
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
<p>and <b>tiny</b> ideas</p>
</div>
下面这里并没有介绍信的data属性，取而代之的事文本的动画效果。
在所有步骤的最起始位置授予future类属性，意味着它将不会再被访问到。
当你的演示文稿移动到有future标签的步骤变为present类型时，就说这一一步工作的动画效果了：文本移动到有present类型的步骤。
最后，当演示从单元元素离开present的属性类后，past类将会替代。
基本上，每一步都有3个属性类：future、present和past。仅仅是当前步骤才是present属性值。
<div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
<p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p>
</div>
<div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
<p>the only <b>limit</b> is your <b class="imagination">imagination</b></p>
</div>
<div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
<p>want to know more?</p>
<q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q>
</div>
<div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
<p>one more thing...</p>
</div>
最后一步将展现impress.js的强大
你不仅仅能用3D来设置属性原形，还能通过任意角度旋转它。
下面将会旋转x轴-40度，y轴10度。
你也可以选择用data-rotate-z属性来选择z轴。它也有上面同样的效果特效。
<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">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it’s</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
<span class="footnote">* beat that, prezi ;)</span>
</div>
So to summarize of all the possible attributes used to position presentation steps, we have:
总结所有能被用于定位设置演示步骤的可能属性，我们有：
- 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的转换函数，更多CSS转换可查看文档 https://developer.mozilla.org/en/CSS/transform
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>
</div>
这里和Impress.js并没有任何的关联。
但是他能向你展示如何更创造性的展示impress.js的特性。
<div class="hint">
<p>Use a spacebar or arrow keys to navigate</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>
相当重要的最后一部分：
为了使得上面的所有描述都能正常真正的工作，你必须在本页包含impress.js文件，我非常鼓励先把inpress.js文件压缩变小。
在这里，我仅仅包含了脚本的所有源码，为的是让它能有更多的可读内容。
同时，你也必须去调用impress().init()函数初始化Impress.js的演示在文档的最后部分：不仅仅是个好的习惯，更是为了整个文档准备的必须做的步骤。
<script src="js/impress.js"></script>
<script>impress().init();</script>
这个impress()函数同时提供了让你访问控制演示的API接口，仅仅通过保存初始化的结果，如:
var api = impress();
初始化完毕后，你可以调用下面3个函数：
api.init();//初始化
api.next();//移动到下一个演示
api.prev();//移动到上一个演示
api.got(idx|id|element,[duration]);
当然，你也可以简单的调用impress()来获取API对象，例如impress().next()。不用担心，它不会重新初始化的。
–>
</body>
</html>
现在，你或多或少已经知道了你打造Impress演示的所有事情，但是在你开始之前…
哦，对了，你已经从github里clone了代码下来了？
你已经开始在记事本编辑器打开了？
住手，现在！！！
这并不是你创建的很了不起的演示，这仅仅是个代码。要实现你的idea你先在你脑海中设想出来。
所以，如果你想打造壮观的演示文稿，拿出笔和纸出来，关掉电脑。
素描、绘画、写作。
在纸上根据你的ideas做头脑风暴。尝试去打造你喜欢的演示的思维导图。这样会让你越来越接近你等会想要用impress.js来建造布局的演示文稿。
当你在纸上已经完成了你的文稿后，再回到代码编辑来。因为早期code并没有什么意义，你只会在浪费时间在定位上做无用的战斗
如果你认为我疯了，请你找到Presentation Zen这本专辑书，它旨在关于创造极好的、迷人的演示文稿。
好好考虑下。如果你没什么兴趣说一说的话，也行是Impress.js并没有帮助到你。
你是否读到这里了？
真的吗？
我很感动！我很想亲自感谢你读到这里！
可以考虑下我的建议，抽出时间，给自己泡杯茶、咖啡、或者其他你想喝的饮料。开始打造你自己的impress文稿PPT。
完。
