使用reveal.js制作精美的网页版PPT

徐小夕 等级 785 0 0

前言

最近在做季度总结和技术分享,所以需要做个PPT, 来回顾这半年来的技术贡献. 但苦于mac上运行PPT那感人的流畅度, 成功的激起了笔者的强迫症, 所以索性想办法通过技术的手段来做个网页版PPT, 这个时候笔者发现了reveal.js: 一个使用 HTML 语言制作演示文稿的 Web 框架,支持插入多种格式的内容,并以类似 PPT 的形式呈现. 花了15分钟系统的调研了一下, 觉得基本满足技术分享类PPT的要求, 所以决定采用该方案来实现我的网页版PPT. 这里列一下笔者的技术调研方法论, 供大家参考: 使用reveal.js制作精美的网页版PPT 所以笔者接下来大致按照以上几个衡量标准, 来带大家一起感受一下如何快速通过reveal.js实现一个极具动感的PPT.

正文

首先笔者先来谈谈PPT的不足(非专业角度, 技术视角):

  • PPT虽然强大,但占据了磁盘的大量空间,运行时内存占用也不小;而且在 mac上跑 PPT 来就像乘上了印度的绿皮小火车。随着 mac 的普及和动画技术的发展,诸如Keynote、Prezi 等新秀陆续出现,它们不仅轻量且可以实现各种炫目的动画效果.
  • 制作需要花费大量时间, 受平台限制

所以对于不熟悉PPT套路的技术工作者来说, 往往很难快速制作出精美的PPT.

接下来我们再看看reveal.js的优势.

使用reveal.js制作精美的网页版PPT

  • reveal.js可以把 Markdown 文件转为类似 PPT 的演示文稿,轻快省力,减少排版上的时间,让演讲者更专于文字内容;同时,也获得 PPT 所不具有的灵活性
  • 制作发布灵活、不限应用,不限平台, 只需修改或打开 HTML 文件
  • 丰富的特性,支持过渡动画、代码高亮、视频背景、Markdown 语法、导出 PDF 等
  • 极度轻量,占用空间和内存少

说了这么多revealjs的优点,接下来我们就来学习如何使用它吧.

reveal.js使介绍以及核心api

使用reveal.js制作精美的网页版PPT 作为一名前端工程师, 我们很容易把reveal.js集成到我们的vue或者react项目中, 但是作为演讲类型的项目,我们直接用最原始的方式实现即可,首先我们需要引入相关的文件,具体可参考官网所说的步骤去做: https://revealjs.com/. 最简单的使用方式如下:

<html>
  <head>
    <link rel="stylesheet" href="dist/reveal.css">
    <link rel="stylesheet" href="dist/theme/white.css">
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
    </div>
    <script src="dist/reveal.js"></script>
    <script>
      Reveal.initialize();
    </script>
  </body>
</html>

这样通过短短几行代码, 我们就能实现一个两页的PPT. 使用reveal.js制作精美的网页版PPT 当然我们还能实现更加自由的演示动画, 父子嵌套结构, 专场动画等. 接下来我们介绍几个核心API.

父子嵌套

父子嵌套主要是一个PPT主题可能包含很多子主题, 要想实现父子主题分明的演示文档, 在reveal.js也很好实现, 只需要在section内部再包裹section标签即可. 代码如下:

<div class="reveal">
    <div class="slides">
        <section>Slide 1</section>
        <section>
           <section>
            Slide 2-1
          </section>
          <section>
            Slide 2-2
          </section>
        </section>
        <section>Slide 3</section>
    </div>
</div>

效果如下图所示: 使用reveal.js制作精美的网页版PPT

嵌入脚本

我们都知道技术类PPT肯定离不开代码, 我们在reveal.js中可以很容易的展示我们的代码,并且支持多种语言, 其框架底层集成了 业界比较有名的highlight.js. 使用方式如下: 使用reveal.js制作精美的网页版PPT

使用Markdown

Markdown是技术工作者常用的编写文档的工具, revealjs同样也支持使用Markdown的方式来编写PPT, 是不是很贴切? 具体方式如下: 使用reveal.js制作精美的网页版PPT

动态背景Backgrounnds

revealjs支持对每一页幻灯片使用自定义背景(包括视频).我们只需要在section标签中使用data-background即可, 并且支持背景透明. 具体demo如下: 使用reveal.js制作精美的网页版PPT Backgrounnds一共有如下属性可以使用:

  • data-background-image 当前页的背景图片地址
  • data-background-size 背景的大小
  • data-background-position 背景位置
  • data-background-repeat 背景的重复方式
  • data-background-opacity 背景透明度
  • data-background-video 视频背景的地址
  • data-background-video-loop 视频背景的循环模式
  • data-background-iframe 背景为iframe的url地址
  • data-background-interactive 是否能与iframe的内容交互

Fragments

Fragments用来高亮或者渐进式的展现元素.每一个包含fragment类名的元素都被视为渐进的元素, 它们会通过点击下一步来依次呈现在幻灯片中. 使用reveal.js制作精美的网页版PPT

定制主题Theme

reveal.js提供了很多种不同风格的主题, 我们只需要引入不同的css即可. 包括黑色(black), 白色(white), league, beige, 天空(sky), 夜晚(night)等主题.大家可以自行感受一下.

Transitions转场动画

不同幻灯片进入页面的动画方式我们可以使用Transitions来设定. 以下是提供的几种默认转场动画:

  • fade 淡出
  • slide 滑出
  • convex 凸面旋转
  • concave 凹面旋转
  • zoom 放大

具体demo实现如下:

<div class="reveal">
    <div class="slides">
        <section>Slide 1</section>
        <section>
          <section data-transition="fade">
            Slide 2-1
          </section>
          <section data-transition="convex">
            Slide 2-2
          </section>
          <section data-transition="concave">
            Slide 2-3
          </section>
          <section data-transition="zoom">
            Slide 2-4
          </section>
        </section>
        <section>Slide 3</section>
    </div>
</div>

效果如下: 使用reveal.js制作精美的网页版PPT

导出PDF

导出PDF作为一个附加功能也算是比较贴心了,如果想了解使用方式可以参考https://revealjs.com/pdf-export/. 接下来我们就来实现一个动态的PPT demo, 供大家学习参考.

reveal.js制作一个一个动感PPT的demo

效果演示: 使用reveal.js制作精美的网页版PPT 代码如下:

<body>
    <div class="reveal">
        <div class="slides">
            <section data-background-image="./img/z1.png" data-background-opacity=".4">
      <h1>趣谈前端</h1>
      <p>徐小夕</p>
    </section>
    <section>
      <section data-transition="fade" data-background-color="orange">
        <h1>趣谈前端 Javascript</h1>
      </section>
      <section data-transition="convex" data-background-color="green">
        <h1>趣谈前端 Vue</h1> 
      </section>
      <section data-transition="concave" data-background-color="#61dafb">
        <h1>趣谈前端 React</h1> 
      </section>
      <section data-transition="zoom" data-background-color="#b32535">
        <h1>趣谈前端 Angular</h1>
      </section>
    </section>
    <section>
      <h1>NodeJS</h1>
      <pre><code data-trim data-noescape>
          const fs = require('fs')
          const Koa = require('koa')
          const app = new Koa()
          </code></pre>
    </section>
    <section>
      <h3>设计模式</h3>
      <p class="fragment">观察者模式</p>
      <p class="fragment">工厂模式</p>
      <p class="fragment">迭代器模式</p>
    </section>
    <section>
      <h4>数据结构与算法</h4>

    </section>
        </div>
    </div>

    <script src="dist/reveal.js"></script>
    <script src="plugin/notes/notes.js"></script>
    <script src="plugin/markdown/markdown.js"></script>
    <script src="plugin/highlight/highlight.js"></script>
    <script>
        // More info about initialization & config:
        // - https://revealjs.com/initialization/
        // - https://revealjs.com/config/
        Reveal.initialize({
            hash: true,

            // Learn about plugins: https://revealjs.com/plugins/
            plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
        });
    </script>
</body>

最后

如果想学习更多H5游戏, webpacknodegulpcss3javascriptnodeJScanvas数据可视化等前端知识和实战,欢迎在《趣谈前端》加入我们的技术群一起学习讨论,共同探索前端的边界。

更多推荐

收藏
评论区

相关推荐

使用reveal.js制作精美的网页版PPT
前言 最近在做季度总结和技术分享,所以需要做个PPT, 来回顾这半年来的技术贡献. 但苦于mac上运行PPT那感人的流畅度, 成功的激起了笔者的强迫症, 所以索性想办法通过技术的手段来做个网页版PPT, 这个时候笔者发现了reveal.js: 一个使用 HTML 语言制作演示文稿的 Web 框架,支持插入多种格式的内容,并以类似 PPT 的形式呈现. 花了1
.NET NPOI导出Excel详解
NPOI,顾名思义,就是POI的.NET版本。那POI又是什么呢?POI是一套用Java写成的库,能够帮助开发者在没有安装微软Office的情况下读写Office的文件。 支持的文件格式包括xls, doc, ppt等。 官方网站:[http://npoi.codeplex.com/](https://www.oschina.net/action/GoT
PHPCon2019
![](https://oscimg.oschina.net/oscnet/58c26436754f462a690d46969a35bf9938b.jpg) 官方 PHPCon 2019 PPT 已上线 分享如下 https://github.com/ThinkDevelopers/PHPConChina 请勿私
HTML+CS+JS的总结(PPT)
发现了一个关于HTML+CS+JS总结比较好的ppt,截取下来与大家分享。 ![在这里插入图片描述](https://oscimg.oschina.net/oscnet/up-ec9cbcc91934d26fa0688ad853bd7240.png) ![在这里插入图片描述](https://oscimg.oschina.net/oscnet/up-
13张PPT带你了解主动式消息队列处理集群
前言 == 偷偷和你们说,我搞了一份内部资料,该内部资料共有13张PPT,据作者透露,该PPT至少花了整整1周时间才编写完成,其内容简洁明了,内容深度足够,易于初学者理解,也给深度开发人员分享了不一样的消息队列的玩法。特别重要的是,该架构目前已大面积的稳定应用于生产环境。 PPT的内容我作了脱敏处理,经作者审核后分享给大家。 特点 == 该消
PDF文件在线转换成PPT
  有多少人做过PDF文件的转换,还是PDF在线转换成PPT的转换,不用说转换成PPT了,连最基本的转换都没有做过吧。PDF文件支持多种文件之间的转换,如果你连PDF怎么转换成别的文件你都不了解,你的领导或者上司会满意你的工作效率吗?其实PDF在线转换成其他格式的文件很简单,转换成PPT文件也不难,需要用到一款在线转换器——迅捷PDF在线转换器。这种在线转换
2014PostgreSQL用户大会PPT下载
由国内PostgreSQL的志愿者发起的“2014PostgreSQL用户大会”于2014年12月12日如期在深圳召开([本站召集帖](http://city.oschina.net/shenzhen/event/177828)),“PostgreSQL用户大会”是一个旨在促进PostgreSQL在中国发展的非营利性的会议。感谢 @[galylee](htt
27行Python代码批量将ppt转换为pdf
![](https://oscimg.oschina.net/oscnet/e7c4cb85-d0ce-49e9-86e5-fcb7db93e062.gif) 这是一个Python脚本,能够批量地将微软Powerpoint文件(.ppt或者.pptx)转换为pdf格式。 **使用说明** 1、将这个脚本跟PPT文件放置在同一个文件夹下。 2、
Flink Forward 201812 PPT资料下载
Flink Forward 201812 PPT资料下载: 下载地址一:http://cdn.iteblog.com/FlinkForward201812.7z 下载地址二:链接:https://pan.baidu.com/s/1aiCp-N6eaclCeBq4OXw1Wg 提取码:a2kh ![](https://oscimg.oschina.n
Flink SQL项目实录
**正文前先来一波福利推荐:** **福利一:** 百万年薪架构师视频,该视频可以学到很多东西,是本人花钱买的VIP课程,学习消化了一年,为了支持一下女朋友公众号也方便大家学习,共享给大家。 **福利二:** 毕业答辩以及工作上各种答辩,平时积累了不少精品PPT,现在共享给大家,大大小小加起来有几千套,总有适合你的一款,很多是网上是下载不到。 **
GopherChina2020(上海)
Gopher China 2020 大会 PPT [https://github.com/gopherchina/conference/tree/master/2020](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fgopherchina%2Fconferen
Less功能特性
(1)变量     我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护 const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor);
PPT vba从Execl 拷贝图表
在PPT 需要引用Execl的COM组件 Dim wkb As Workbook Sub Change() Set wkb = Workbooks.Open("D:\D2_月报基础数据.xlsx") Set PPSlide_name = ActivePresentation.Slid
RPC理论以及Dubbo的使用介绍
 **正文前先来一波福利推荐:** **福利一:** 百万年薪架构师视频,该视频可以学到很多东西,是本人花钱买的VIP课程,学习消化了一年,为了支持一下女朋友公众号也方便大家学习,共享给大家。 **福利二:** 毕业答辩以及工作上各种答辩,平时积累了不少精品PPT,现在共享给大家,大大小小加起来有几千套,总有适合你的一款,很多是网上是下载不到。
ThreatSource:Google BeyondProd安全架构详解
![](https://oscimg.oschina.net/oscnet/dfa6b6d0-1901-41c8-80c0-4b44ff062344.jpg) > 安全乐观主义点评:由cnbird鸟哥分享的一份介绍Google BeyondProd实现的ppt,笔者遗憾没有现场听到具体的内容,ppt下面的“安全乐观主义点评”字样为小编的发散