reveal.js演示文档介绍
发布于

目录
什么是reveal.js
根据reveal.js官网介绍
reveal.js是一个开源HTML演示文档框架,是一个免费的工具, 让所有人都能在浏览器里创建他们漂亮的演示文档。 reveal.js创建出来的文档都是网页文档(也就是国内所谓的H5技术)。 reveal.js拥有许多传统PPT所没有的功能 ,比如嵌套幻灯片、Markdown支持, 自动化动画,LaTeX支持,程序代码高亮等等…
说简单点,传统PPT创建演示文档的是.pptx文件,而reveal.js创建出的演示文档是一个网页文件,不需要安装ppt,用浏览器就可以直接打开
reveal.js的优势
- 浏览器支持
空手上台,打开一个网址就展示出你要讲的演示文档,是不是很帅? - 排版简洁迅速
没有PowerPoint令人头秃的小三大四行距段间距 - 在任何浏览器上展示幻灯片
发现别人的PPT版本和你的PPT版本不一样导致排版混乱是不是很绝望? - 在演示文稿中插入网页、在线播放视频
PPT能做得到? - Git版本控制
协作编辑/清晰追踪每一次更改记录 - 代码/文字/媒体资源分离
不用每次都发一个30M+的文档过去啦
reveal.js的劣势
- 需要写点代码
并没有多难,但吓跑了许多萌新
演示
本demo来自reveal.js官网
为了方便预览咱降低了录制帧数,源动画有60fps
- 水平和垂直导航
- 代码高亮&自动动画
- Ctrl+鼠标左键任意放大
- 设置元素追踪即可自动生成动画
- 单元素动画
- 背景/拓展背景/视频背景/GIF背景
- 背景动画
- 网页浏览
- 按下B键黑屏Take a break!
如何使用
使用reveal.js有两种姿势
- 打开https://slides.com,免费创建一个帐号,然后用键盘和鼠标像编辑PPT一样操作
- 下载reveal.js源代码,然后用文本编辑器编写一丢丢代码创造幻灯片
第一种方法简单实用,足够大多数普通人使用了。本文仅折腾介绍第二种方法,因此接下来的内容适合有HTML基础的同学食用
两种方法最终得到的网页并无什么区别,请强迫症童鞋不要紧张
下载reveal.js
- 直接下载压缩包
https://github.com/hakimel/reveal.js/archive/master.zip
下载完成后解压即可 - 如果装有git的童鞋可以运行
git clone https://github.com/hakimel/reveal.js --depth 1
解析网页文件代码
解压后进入reveal.js文件夹
reveal.js提供了两个模板
- index.html 两张幻灯片,分别写着Slide 1和Slide 2
- demo.html 所有功能的使用示例,即本文开头的演示动画
咱先用文本编辑器(如notepad++或visual studio code甚至记事本)打开index.html
基本元素
这个文件有40多行,其中大部分都是为了载入reveal.js相关插件和主题,我们要关注的只有body后紧跟着的这一部分
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
</body>
不难发现
<section>
即代表一张幻灯片- 所有幻灯片都放在
<div class="slides">
这个标签里
更多元素
再查看demo.html里更高级的用法
<section>
<a href="https://revealjs.com">
<img src="https://static.slid.es/reveal/logo-v1/reveal-white-text.svg"
alt="reveal.js logo" style="height: 180px; margin: 0 auto 4rem auto;
background: transparent;" class="demo-logo">
</a>
<h3>The HTML Presentation Framework</h3>
<p>
<small>
Created by <a href="http://hakim.se">Hakim El Hattab</a>
and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">
contributors</a>
</small>
</p>
</section>
效果如上图,这是一个稍微复杂一点点的幻灯片,
但还是由<section>
扩起所有html元素,这些html元素也是最基本的<a>
<img>
<h3>
<p>
等
嵌套/垂直导航幻灯片
<section>
<section>Slide 1</section>
<section>Slide 2</section>
</section>
即<section>
里再套了一个<section>
这就是reveal.js的基本结构
更多功能请查看demo.html源代码,源代码附有十分详细的注释,本菜鸡不再赘述