Impress.js 制作令人眩目的内容展示效果
Impress.js 是一个JavaScript 程序包，它的功能是让你制作出令人眩目的内容展示效果，主要里利用了 CSS 3D Transforms 里的旋转，扭曲，缩放等特性，所以，只有最新版的 Firefox，或谷歌浏览器或苹果浏览器才能看到它产生的效果。
简介
Impress.js 不需要依靠任何别的 css，所有的效果都已经包括在js里了。接下来的 demo 的格式仅仅是用于普通的演讲风格的，或者是作为备用格式，哥不希望你直接用在你的演讲里面啊。自己动手，丰衣足食。大家都不希望所有的 impress.js 演讲文稿都长一样子吧。
看完这个代码之后希望你能摆脱它的约束。从头开始构建属于自己的文稿，很有趣吧。
impress-not-supported
在 body 元素里面设置一些有用的类名，这样可以检测对某个 css 或是其他的脚本支持的好不好。
第一个灰常有用的类名叫 impress-not-supported。这个类名意思是如果你的浏览器弱爆了不支持 impress.js 的一些功能的话，你就应该准备一些备用的内容在你的 css 里。
<body class="impress-not-supported">
<!--
For example this fallback message is only
visible when there is `impress-not-supported` class on body.
举个栗子，这里的备用信息只会在当 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>其实也不是非要把这个类名加上啦。如果你的浏览器不带感的话，它会自动的加上这个类，但是如果你写上就可以让那些不能使用js的苦逼使用上后备风格。
当 impress.js 检测到你的浏览器比较屌支持所有的特性的时候，这个类会自动移除。这个在 body 元素里的类名也取决于你自己文稿的步骤。当 “hint” 元素被解释的时候，你会继续的发现更多的内容。
data-*
好了，接下来你会看到一些 impress.js 中的核心元素。这些方法都是已经封装好的。在这个元素中，任何看起来很神奇的东西都会发生。
你可能现在不会需要，但是有些配置选项是可以在这个元素中设置的。
如果要修改幻灯片之间的过度时间请用这样的 data-transition-duration="2000" 将其设置为2000毫秒（2秒）。默认的时间是1秒。
你也可以设置幻灯片的视角，比如 data-perspective="500" ，默认的是1000。如果你不喜欢3D效果的话你也可以设置这个值为0。
如果你想你可以学习一下CSS的视角变换的工作方法：https://developer.mozilla.org/en/CSS/perspective
但是听哥的，你目前还不需要，别担心--这还有些有关这个 tag 的简单却有趣的东西。
定义位置
现在会有些好玩的东西要发生了。
演示文稿的没一步都应该放在 #impress 中，以及一个叫做 step 的类名。这些 step 元素被 impress.js 所确定位置，旋转和缩放，监视器会显示演示的每一步。通过数据属性来定义位置信息。
在接下来的例子中我们仅仅用 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>你是不是觉得传统的幻灯片都 <b>弱爆了</b> ？</q> </div>
跳转位置
这个 id 元素的属性可以标记在 URL 中，这也是可选的。
如果它没有被定义，它将会获得一个默认的值 step-N ，N 是当前幻灯的页数。
因此在接下来的例子里它将会获得 step-2 。如果这一部分被激活，url 将会变成 #/step-2 。因此你也可以在链接里使用 #/step-2 ，直接指向这一页。
但是啊，少年你还是少用这种不符合标准的形式吧，如果你使用经典的方法比如 #step-2 ，那么即使用户不支持也可以使用备用效果。
<div class="step slide" data-x="0" data-y="-1500"> <q>你有没有想过，在 <strong>现代浏览器</strong> 光辉下， 我们可以不再受限于 <strong>老旧浏览器的残忍压迫</strong> ？</q> </div> <div class="step slide" data-x="1000" data-y="-1500"> <q>你难道不想使用 <strong>华丽的舞台效果</strong> 来 <strong>震惊你的观众</strong> 吗？</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">那么，您应该尝试一下</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> <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6"> <p>它可以具象化您 <big style="font-size:larger">伟大</big> </p> </div>
令人惊奇的时刻到了！我们正式的迈入了三维空间！
使用 data-x 与 data-y 两个元素，你可以用 data-z 来定义第三坐标轴 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>
在这一页中并没有介绍什么新的有关于数据的东西，但是你应该注意到在这个demo中有一些文字看起来比较的带感。这是一个比较基础的CSS变化。（后面半句可以认为是废话，想学英语的可以看一下）
在最开始的时候，所有的元素都会被分类到 future 中，这意味着他们没有被访问过。当幻灯片开始移动使 future 的类移动到 present。
这也是为什么刚才那一页能够工作的原因-当这一页变成成 present 的时候文字就会移动。
最终这一页又会从 present 变化为 past 。所以所有的页面都会有 future present past 三种类，只有当前正在运行的页面才会有 present 这个类。
<div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6"> <p>它在一个无线大的画布上，展示了 <b class="positioning">定位</b> , <b class="rotating">旋转</b> 和 <b class="scaling">缩放</b> 的特效</p> </div> <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6"> <p><b class="imagination">心</b>有多大，<b>舞台</b>就有多大</p> </div> <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4"> <p>想知道更多吗？</p> <q><a href="http://github.com/bartaz/impress.js">查看源码吧</a>, 兄台!</q> </div> <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2"> <p>哦，还有一件事情……</p> </div>
在这一页你可以感受到 impress.js 强大的力量和百变的灵活性。
你不只能够用坐标轴确定3D元素，你还可以让它绕着任意的坐标轴旋转。
这里这个例子会让他围绕 X 轴旋转-40度（逆时针40°）再围绕 Y 轴旋转10度。
你当然也可以使用 data-rotate-z 使元素围绕 Z 轴旋转，这当然和 data-rotate 效果是类似的。
<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">你</span> <span class="you">有没有</span> <span class="noticed">注意到</span> <span class="its">它</span> <span class="in">是</span> <b>3D<sup>*</sup></b>的？</p> <span class="footnote">* prezi可没这能力</span> </div>
总结一下所有的定位用的属性:
- 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
更多的信息请参考 CSS transfrom 文档：https://developer.mozilla.org/en/CSS/transform
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10"> </div>
如果你只是一个使用者，看到这里就可以结束了，inpress.js 的优点是无与伦比的，绚丽，帅气，然而对于普通的使用者来说，使用 Microsoft 的软件要比这个要简单的多。
最后
最后，但远远不是结束。
为了让上述的动作顺利进行，我们必须在页面里包含 impress.js 这个文件。建议你使用一个压缩过的文件。
我这里包含了一个未压缩的版本，这样可以增加可读性，你同时还需要使用 impress().init() 函数来初始化 impress.js，你应该在最后调用这个函数。并不仅仅因为这是个好习惯，而且这样会保证当页面加载完成后执行。
当然你可以使用 DOM ready 事件，但是我比较懒。
API 概述
impress() 函数给了你一个控制演示API的方法。
把结果放在一个变量里：
var api = impress();
这样你就可以使用几个可以使用的方法：
- api.init() - 初始化演示；
- api.next() - 播放下一个幻灯片；
- api.prev() - 回到上一个幻灯片；
- api.goto( idx | id | element, [duration] ) - 通过知道那个id或者DOM播放指定的幻灯片
可以指定转换时间（单位毫秒），当然时间可以是缺省的。你可以随时再次调用 impress() 来再一次获得这个API，类似 impress().next() 当然也是可以的。
不用担心，这不会再一次的初始化impress。
在线演示：https://www.wenjiangs.com/wp-content/uploads/2020/docimg32/impress.js/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论