使用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 相关文章推荐
javascript 计算两个整数的百分比值
Dec 26 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
javascript 实现 原路返回
Jan 21 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 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多个文件及图片上传实例详解
2014/11/10 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
采用call方式实现js继承
2014/05/20 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
python实现读取并显示图片的两种方法
2017/01/13 Python
基于Django用户认证系统详解
2018/02/21 Python
python构建深度神经网络(续)
2018/03/10 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
python调用外部程序的实操步骤
2019/03/04 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
如何在Python对Excel进行读取
2020/06/04 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
制定岗位职责的原则
2013/11/08 职场文书
和谐社区口号
2014/06/19 职场文书