使用impress.js制作幻灯片
上周看到一个朋友做了很炫的缩放式幻灯片，可能因为对此知识了解的不多，找了好久才找到几个web幻灯片工具。通过筛选决定用Geek的impress.js。
impress.js是一款新兴的幻灯工具，它的效果类似Prezi，但是拥有3D的功能，而且是在MIT&GPL协议下开源，对于有一定的Web开发基础的人而言，真是一个福音！只需要简单的用一些html指令，并加载impress.js就可以制作出一个很绚丽的缩放式幻灯。
制作时首先你需要写一些head，这和普通的Web是一样的，但body不同。由于目前impress.js只支持Chrome、Firefox和Safari这样的现代浏览器（摸摸IE……），所以需要一个fallbackmessage。
<bodyclass="impress-not-supported"> <divclass="fallback-message"> <p>Yourbrowser<b>doesn'tsupportthefeaturesrequired</b>byimpress.js,soyouarepresentedwithasimplifiedversionofthispresentation.</p> <p>Forthebestexperiencepleaseusethelatest<b>Chrome</b>,<b>Safari</b>or<b>Firefox</b>browser.</p> </div>
然后开始写真正的主体，impress部分。这部分必须完全被框在“\<divid="impress"\>”之中。
第一中幻灯片是stepslide，这个和普通的幻灯片很像，就是一页一页的。可以用如下的方法添加
<divid="page1"class="stepslide"data-x="-1000"data-y="-1500"> <q>第一页的幻灯片</q> </div>
你需要写的是id、data-x和data-y。id就是一个名称，而data-x、data-y则是坐标。事实上impress.js是给你了一个很大场地布景，而你需要的就是把一张张幻灯片扔进去，放到恰当的位置。然后它会按照你扔的顺序进行展示。其实坐标还有一个，是data-z，这个坐标可以把你带入3D效果之中，进行缩放。
另一种幻灯就叫做step，不像前一种有个死板的框，这种幻灯片彻底去掉了限制你的框，而是直接的写在背景上。请看下面这个例子：
<divid="title"class="step"data-x="0"data-y="0"data-scale="4"> <span>你看到的幻灯片由</span> <h1>impress.js</h1> <span>给你呈现</span> </div>
这里特别的是有一个data-scale，表示这个幻灯片的大小，你可以把一页做得非常大或者非常小，来提供一个缩放的反差。还有一个旋转功能：
<divid="its"class="step"data-x="850"data-y="3000"data-rotate="90"data-scale="5"> <p>这是一个<strong>presentationtool</strong><br/> 作者从<ahref="http://prezi.com">prezi.com</a>得到灵感<br/> 利用现代浏览器<strong>CSS3transformsandtransitions</strong>的力量</p> </div>
上面的data-rotate就是表示旋转的角度。
最后，你可以提供一个hint，告诉用户需要使用键盘的方向键来控制整个播放过程。如果用户刚点开幻灯片而没反应，这个提示会自动浮现。
<divclass="hint"> <p>请用方向键控制</p> </div>
在页面的最后，你需要加载impress.js，我这里是直接引用作者的页面，但如果是离线的展示，建议下载下来使用。仅仅加载js是不够的，还需要用impress().init()来启动。
<scriptsrc="http://bartaz.github.io/impress.js/js/impress.js"></script> <script>impress().init();</script>
事实上这个工具功能还有很多，我只是学了一些最基本的功能。官网的建议是直接看他提供的index.html，里面有详细的注释告诉你有什么功能，我做了一个页面，也是从作者提供的index.html改出来的。虽然这些东西很简单，但做一个演讲使用的幻灯片，也已经足够好了。我做的页面放在Gist上，整体代码见本页最后。
当然类似的工具不能不提Prezi，它是这个创意的最初实现，不过据说不支持中文。国内腾讯AlloyTeam也开发了一个叫做iPresst的工具，可以说是傻瓜级的好东西，不过由于是社交网络式的，有点不够隐私。impress.js最大的缺陷就是太Geek了，如果能够有个所见即所得的开发工具，一定能够推广开来。
<!doctypehtml>
<htmllang="zh-cn">
<head>
<metacharset="utf-8"/>
<metaname="viewport"content="width=1024"/>
<metaname="apple-mobile-web-app-capable"content="yes"/>
<title>impress.js尝试</title>
<linkhref="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"/>
<linkhref="http://bartaz.github.io/impress.js/css/impress-demo.css"rel="stylesheet"/>
</head>
<bodyclass="impress-not-supported">
<divclass="fallback-message">
<p>Yourbrowser<b>doesn'tsupportthefeaturesrequired</b>byimpress.js,soyouarepresentedwithasimplifiedversionofthispresentation.</p>
<p>Forthebestexperiencepleaseusethelatest<b>Chrome</b>,<b>Safari</b>or<b>Firefox</b>browser.</p>
</div>
<divid="impress">
<divid="page1"class="stepslide"data-x="-1000"data-y="-1500">
<q>第一页的幻灯片：<br/>是否尝试过这样<b>幻灯</b>？</q>
<q>这种幻灯片最初由Prezi带给世界</q>
</div>
<divclass="stepslide"data-x="0"data-y="-1500">
<q>这种幻灯片通过ZUI的方式，彻底摆脱了传统幻灯片的“盒子限制”</q>
<q><strong>唯一限制你的是你的创意！</strong></q>
</div>
<divclass="stepslide"data-x="1000"data-y="-1500">
<q>后面还有<fontcolor="red"><strong>更多惊喜！</strong></font></q>
</div>
<divid="title"class="step"data-x="0"data-y="0"data-scale="4">
<span>你看到的幻灯片由</span>
<h1>impress.js</h1>
<span>给你呈现</span>
</div>
<divid="its"class="step"data-x="850"data-y="3000"data-rotate="90"data-scale="5">
<p>这是一个<strong>presentationtool</strong><br/>
作者从<ahref="http://prezi.com">prezi.com</a>得到灵感<br/>
利用现代浏览器<strong>CSS3transformsandtransitions</strong>的力量</p>
</div>
<divid="big"class="step"data-x="4000"data-y="2100"data-rotate="180"data-scale="6">
<p>将你的想法视觉化</p>
</div>
<divid="end"class="step"data-x="7000"data-y="2500"data-rotate="90"data-scale="6">
<p>请看<ahref="http://bartaz.github.io/impress.js"><b>impress.js</b></a>
<br/>
开放的幻灯工具</p>
</div>
<divid="overview"class="step"data-x="3000"data-y="1500"data-scale="10">
</div>
</div>
<divclass="hint">
<p>请用方向键控制</p>
</div>
<script>
if("ontouchstart"indocument.documentElement){
document.querySelector(".hint").innerHTML="<p>请用方向键控制</p>";
}
</script>
<scriptsrc="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>
以上内容就是我给大家分享的使用impress.js制作幻灯片，代码很简单，希望对大家学习有所帮助。