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