摘要：前两天学长回学校进行洗脑宣讲，做了一个看上去很炫的缩放式幻灯片。可以用如下的方法添加第一页的幻灯片你需要写的是和。如果用户刚点开幻灯片而没反应，这个提示会自动浮现。虽然这些东西很简单，但做一个演讲使用的幻灯片，也已经足够好了。
前两天学长回学校进行洗脑宣讲，做了一个看上去很炫的缩放式幻灯片。我不知道是不是太浅薄了，找了很久才找到几个Web幻灯片工具。看了几个之后，我决定学习一下其中最Geek的impress.js。
impress.js是一款新兴的幻灯工具，它的效果类似Prezi，但是拥有3D的功能，而且是在MIT&GPL协议下开源，对于有一定的Web开发基础的人而言，真是一个福音！只需要简单的用一些html指令，并加载impress.js就可以制作出一个很绚丽的缩放式幻灯。
制作时首先你需要写一些head，这和普通的Web是一样的，但body不同。由于目前impress.js只支持Chrome、Firefox和Safari这样的现代浏览器（摸摸IE……），所以需要一个fallback message。
然后开始写真正的主体，impress部分。这部分必须完全被框在“ < div id="impress" >”之中。
第一中幻灯片是step slide，这个和普通的幻灯片很像，就是一页一页的。可以用如下的方法添加
你需要写的是id、data-x和data-y。id就是一个名称，而data-x、data-y则是坐标。事实上impress.js是给你了一个很大场地布景，而你需要的就是把一张张幻灯片扔进去，放到恰当的位置。然后它会按照你扔的顺序进行展示。其实坐标还有一个，是data-z，这个坐标可以把你带入3D效果之中，进行缩放。
另一种幻灯就叫做step，不像前一种有个死板的框，这种幻灯片彻底去掉了限制你的框，而是直接的写在背景上。请看下面这个例子：
你看到的幻灯片由impress.js
给你呈现
这里特别的是有一个data-scale，表示这个幻灯片的大小，你可以把一页做得非常大或者非常小，来提供一个缩放的反差。还有一个旋转功能：
这是一个 presentation tool
作者从 prezi.com 得到灵感
利用现代浏览器CSS3 transforms and transitions的力量
上面的data-rotate就是表示旋转的角度。
最后，你可以提供一个hint，告诉用户需要使用键盘的方向键来控制整个播放过程。如果用户刚点开幻灯片而没反应，这个提示会自动浮现。
请用方向键控制
在页面的最后，你需要加载impress.js，我这里是直接引用作者的页面，但如果是离线的展示，建议下载下来使用。仅仅加载js是不够的，还需要用impress().init()来启动。
事实上这个工具功能还有很多，我只是学了一些最基本的功能。官网的建议是直接看他提供的index.html，里面有详细的注释告诉你有什么功能，我做了一个页面，也是从作者提供的index.html改出来的。虽然这些东西很简单，但做一个演讲使用的幻灯片，也已经足够好了。我做的页面放在Gist上，整体代码见本页最后。
当然类似的工具不能不提Prezi，它是这个创意的最初实现，不过据说不支持中文。国内腾讯AlloyTeam也开发了一个叫做iPresst的工具，可以说是傻瓜级的好东西，不过由于是社交网络式的，有点不够隐私。impress.js最大的缺陷就是太Geek了，如果能够有个所见即所得的开发工具，一定能够推广开来。
impress.js 尝试
你看到的幻灯片由
impress.js
给你呈现
这是一个 presentation tool
作者从 prezi.com 得到灵感
利用现代浏览器CSS3 transforms and transitions的力量
将你的想法视觉化
请看impress.js
开放的幻灯工具
请用方向键控制
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/87518.html
摘要：由于是线上发布，所有有部分人问我怎么正确的使用它。因为没有在实际的项目页面设置帮助文档。需求为了看到效果，请使用目前并不兼容早期的版本。第四张幻灯片来个新花样，使用的值控制其缩放大小。 可以先看一个demo：http://dwqs.github.io/resume 昨天，我写了一些关于Impress.js的东西，对于创建在线的自我展示，这是一个非常不错的JavaScript库。由于是...
摘要：上有趣又实用的前端项目持续更新，欢迎补充幻灯片展示框架一个专门用来做幻灯片的框架，支持和语法。又一个幻灯片展示框架一个受的启发，使用了现代浏览器里支持的和的特效幻灯片。我的个人网站首页也是用开发的。好在有可以帮助我们解决这个问题。 github 上有趣又实用的前端项目（持续更新，欢迎补充） 1. reveal.js: 幻灯片展示框架 一个专门用来做 HTML 幻灯片的框架，支持 HTM...
摘要：上有趣又实用的前端项目持续更新，欢迎补充幻灯片展示框架一个专门用来做幻灯片的框架，支持和语法。又一个幻灯片展示框架一个受的启发，使用了现代浏览器里支持的和的特效幻灯片。我的个人网站首页也是用开发的。好在有可以帮助我们解决这个问题。 github 上有趣又实用的前端项目（持续更新，欢迎补充） 1. reveal.js: 幻灯片展示框架 一个专门用来做 HTML 幻灯片的框架，支持 HTM...
摘要：构造一个事件，该事件以命名，用处理数据，并在上执行。导航事件键盘处理导航按键被按下时防止不允许被按下的键被意外按下方法阻止元素发生默认的行为。的切换主要通过来实现，跳转至以参数索引或元素名标记的。 引子 断断续续用了好几天，终于把 impress.js 源码看完，作为刚入门的前端菜鸟，这是我第一次看 js 源码，最初还是比较痛苦的。不过还好，impress.js源码的注释相当清楚...
阅读 3397·2019-08-30 15:55
阅读 1212·2019-08-29 16:20
阅读 3459·2019-08-29 12:42
阅读 2497·2019-08-26 10:35
阅读 820·2019-08-26 10:23
阅读 3275·2019-08-23 18:32
阅读 675·2019-08-23 18:32
阅读 2712·2019-08-23 14:55
