reveal.js演示文档介绍

发布于

目录

什么是reveal.js

根据reveal.js官网介绍

reveal.js是一个开源HTML演示文档框架，是一个免费的工具， 让所有人都能在浏览器里创建他们漂亮的演示文档。 reveal.js创建出来的文档都是网页文档（也就是国内所谓的H5技术）。 reveal.js拥有许多传统PPT所没有的功能 ，比如嵌套幻灯片、Markdown支持， 自动化动画，LaTeX支持，程序代码高亮等等…

说简单点，传统PPT创建演示文档的是.pptx文件，而reveal.js创建出的演示文档是一个网页文件，不需要安装ppt，用浏览器就可以直接打开

reveal.js的优势

  1. 浏览器支持
    空手上台，打开一个网址就展示出你要讲的演示文档，是不是很帅？
  2. 排版简洁迅速
    没有PowerPoint令人头秃的小三大四行距段间距
  3. 在任何浏览器上展示幻灯片
    发现别人的PPT版本和你的PPT版本不一样导致排版混乱是不是很绝望？
  4. 在演示文稿中插入网页、在线播放视频
    PPT能做得到？
  5. Git版本控制
    协作编辑/清晰追踪每一次更改记录
  6. 代码/文字/媒体资源分离
    不用每次都发一个30M+的文档过去啦

reveal.js的劣势

  1. 需要写点代码
    并没有多难，但吓跑了许多萌新

演示

本demo来自reveal.js官网

为了方便预览咱降低了录制帧数，源动画有60fps

  1. 水平和垂直导航 image
  2. 代码高亮&自动动画 image2
  3. Ctrl+鼠标左键任意放大 image3
  4. 设置元素追踪即可自动生成动画 image4
  5. 单元素动画 image5
  6. 背景/拓展背景/视频背景/GIF背景 image6
  7. 背景动画 image7
  8. 网页浏览 image8
  9. 按下B键黑屏Take a break! image9

如何使用

使用reveal.js有两种姿势

  1. 打开https://slides.com，免费创建一个帐号，然后用键盘和鼠标像编辑PPT一样操作
    slides.com
  2. 下载reveal.js源代码，然后用文本编辑器编写一丢丢代码创造幻灯片

第一种方法简单实用，足够大多数普通人使用了。本文仅折腾介绍第二种方法，因此接下来的内容适合有HTML基础的同学食用

两种方法最终得到的网页并无什么区别，请强迫症童鞋不要紧张

下载reveal.js

解析网页文件代码

解压后进入reveal.js文件夹

reveal.js提供了两个模板

咱先用文本编辑器（如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>

不难发现

更多元素

再查看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源代码，源代码附有十分详细的注释，本菜鸡不再赘述

参考文章

  1. revealjs.com