Impress.js 制作令人眩目的内容展示效果 - 文章教程

Impress.js 制作令人眩目的内容展示效果

发布于 2020-12-24 字数 9844 浏览 1006 评论 0

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 target="_blank" class="external-link" 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 target="_blank" class="external-link" 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/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0