使用impress.js制作幻灯片


Posted in Javascript onSeptember 09, 2015

上周看到一个朋友做了很炫的缩放式幻灯片,可能因为对此知识了解的不多,找了好久才找到几个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。

<body class="impress-not-supported">
<div class="fallback-message">
  <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
  <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

然后开始写真正的主体,impress部分。这部分必须完全被框在“\ < div id="impress"\ >”之中。

第一中幻灯片是step slide,这个和普通的幻灯片很像,就是一页一页的。可以用如下的方法添加

<div id="page1" class="step slide" 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,不像前一种有个死板的框,这种幻灯片彻底去掉了限制你的框,而是直接的写在背景上。请看下面这个例子:

<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
  <span>你看到的幻灯片由</span>
  <h1>impress.js</h1>
  <span>给你呈现</span>
</div>

这里特别的是有一个data-scale,表示这个幻灯片的大小,你可以把一页做得非常大或者非常小,来提供一个缩放的反差。还有一个旋转功能:

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
  <p>这是一个 <strong>presentation tool</strong> <br/>
  作者从 <a href="http://prezi.com">prezi.com</a> 得到灵感<br/>
  利用现代浏览器<strong>CSS3 transforms and transitions</strong>的力量</p>
</div>

上面的data-rotate就是表示旋转的角度。

最后,你可以提供一个hint,告诉用户需要使用键盘的方向键来控制整个播放过程。如果用户刚点开幻灯片而没反应,这个提示会自动浮现。

<div class="hint">
  <p>请用方向键控制</p>
</div>

在页面的最后,你需要加载impress.js,我这里是直接引用作者的页面,但如果是离线的展示,建议下载下来使用。仅仅加载js是不够的,还需要用impress().init()来启动。

<script src="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了,如果能够有个所见即所得的开发工具,一定能够推广开来。

<!doctype html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=1024" />
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <title>impress.js 尝试</title>
  <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" />
 <link href="http://bartaz.github.io/impress.js/css/impress-demo.css" rel="stylesheet" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
 <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
 <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

<div id="impress">
 <div id="page1" class="step slide" data-x="-1000" data-y="-1500">
  <q>第一页的幻灯片:<br/>是否尝试过这样<b>幻灯</b>?</q>
  <q>这种幻灯片最初由Prezi带给世界</q>
 </div>
 <div class="step slide" data-x="0" data-y="-1500">
  <q>这种幻灯片通过ZUI的方式,彻底摆脱了传统幻灯片的“盒子限制”</q>
  <q><strong>唯一限制你的是你的创意!</strong></q>
 </div>
 <div class="step slide" data-x="1000" data-y="-1500">
  <q>后面还有<font color="red"><strong>更多惊喜!</strong></font></q>
 </div>
 <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
  <span>你看到的幻灯片由</span>
  <h1>impress.js</h1>
  <span>给你呈现</span>
 </div>
 <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
  <p>这是一个 <strong>presentation tool</strong> <br/>
  作者从 <a href="http://prezi.com">prezi.com</a> 得到灵感<br/>
  利用现代浏览器<strong>CSS3 transforms and transitions</strong>的力量</p>
 </div>
 <div id="big" class="step" data-x="4000" data-y="2100" data-rotate="180" data-scale="6">
  <p>将你的想法视觉化</p>
 </div>
 <div id="end" class="step" data-x="7000" data-y="2500" data-rotate="90" data-scale="6">
  <p>请看<a href="http://bartaz.github.io/impress.js"><b>impress.js</b></a>
  <br/>
  开放的幻灯工具</p>
 </div>
 <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
 </div>
</div>

<div class="hint">
 <p>请用方向键控制</p>
</div>

<script>
if ("ontouchstart" in document.documentElement) { 
 document.querySelector(".hint").innerHTML = "<p>请用方向键控制</p>";
}
</script>
<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>

以上内容就是我给大家分享的使用impress.js制作幻灯片,代码很简单,希望对大家学习有所帮助。

Javascript 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
js Calender控件使用详解
Jan 05 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
vue组件的写法汇总
Apr 12 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
谈谈impress.js初步理解
Sep 09 #Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 #Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 #Javascript
JavaScript中实现Map的示例代码
Sep 09 #Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 #Javascript
javascript实现日期时间动态显示示例代码
Sep 08 #Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 #Javascript
You might like
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
asp 取文本框名称代码
2008/12/02 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
利用python画出AUC曲线的实例
2020/02/28 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
描述内存分配方式以及它们的区别
2016/10/15 面试题
如何查找网页漏洞
2016/06/22 面试题
电子商务专业求职信
2014/07/10 职场文书
经营目标管理责任书
2014/07/25 职场文书
项目工作说明书
2014/07/29 职场文书
上班离岗检讨书
2014/09/10 职场文书
房屋转让协议书
2014/10/18 职场文书
地道战观后感
2015/06/04 职场文书
红歌会主持词
2015/07/02 职场文书
大学生十八大感想
2015/08/11 职场文书
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫