作者： 徐小夕转发链接：https://mp.weixin.qq.com/s/XHwOHf498t6ZNfDLiwZ6Xg前言最近在做季度总结和技术分享,所以需要做个PPT, 来回顾这半年来的技术贡献. 但苦于mac上运行PPT那感人的流畅度, 成功的激起了笔者的强迫症, 所以索性想办法通过技术的手段来做个网页版PPT, 这个时候笔者发现了reveal.js: 一个使用 HTML 语言制作演示文稿的 Web 框架，支持插入多种格式的内容，并以类似 PPT 的形式呈现. 花了15分钟系统的调研了一下, 觉得基本满足技术分享类PPT的要求, 所以决定采用该方案来实现我的网页版PPT. 这里列一下笔者的技术调研方法论, 供大家参考:所以笔者接下来大致按照以上几个衡量标准, 来带大家一起感受一下如何快速通过reveal.js实现一个极具动感的PPT.正文首先笔者先来谈谈PPT的不足(非专业角度, 技术视角):PPT虽然强大，但占据了磁盘的大量空间，运行时内存占用也不小；而且在 mac上跑 PPT 来就像乘上了印度的绿皮小火车。随着 mac 的普及和动画技术的发展，诸如Keynote、Prezi 等新秀陆续出现，它们不仅轻量且可以实现各种炫目的动画效果.制作需要花费大量时间, 受平台限制所以对于不熟悉PPT套路的技术工作者来说, 往往很难快速制作出精美的PPT.接下来我们再看看reveal.js的优势.reveal.js可以把 Markdown 文件转为类似 PPT 的演示文稿，轻快省力，减少排版上的时间，让演讲者更专于文字内容；同时，也获得 PPT 所不具有的灵活性制作发布灵活、不限应用，不限平台, 只需修改或打开 HTML 文件丰富的特性，支持过渡动画、代码高亮、视频背景、Markdown 语法、导出 PDF 等极度轻量，占用空间和内存少说了这么多revealjs的优点,接下来我们就来学习如何使用它吧.reveal.js使介绍以及核心api作为一名前端工程师, 我们很容易把reveal.js集成到我们的vue或者react项目中, 但是作为演讲类型的项目,我们直接用最原始的方式实现即可,首先我们需要引入相关的文件,具体可参考官网所说的步骤去做: 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.当然我们还能实现更加自由的演示动画, 父子嵌套结构, 专场动画等. 接下来我们介绍几个核心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>
复制代码效果如下图所示:嵌入脚本我们都知道技术类PPT肯定离不开代码, 我们在reveal.js中可以很容易的展示我们的代码,并且支持多种语言, 其框架底层集成了 业界比较有名的highlight.js. 使用方式如下:使用MarkdownMarkdown是技术工作者常用的编写文档的工具, revealjs同样也支持使用Markdown的方式来编写PPT, 是不是很贴切? 具体方式如下:动态背景Backgrounndsrevealjs支持对每一页幻灯片使用自定义背景(包括视频).我们只需要在section标签中使用data-background即可, 并且支持背景透明. 具体demo如下: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的内容交互FragmentsFragments用来高亮或者渐进式的展现元素.每一个包含fragment类名的元素都被视为渐进的元素, 它们会通过点击下一步来依次呈现在幻灯片中.定制主题Themereveal.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>
复制代码导出PDF导出PDF作为一个附加功能也算是比较贴心了,如果想了解使用方式可以参考https://revealjs.com/pdf-export/接下来我们就来实现一个动态的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>推荐JavaScript学习相关文章《15个简单的JS编码标准让你的代码更整洁》《Node 中的全链路式日志标记及处理》《使用 Node 开发服务器项目时如何高效地打日志？》《一文带你搞懂前端如何玩转 Word 文档》《高频面试题：JavaScript事件循环机制解析》《手写一个Promise/A+ 完美通过官方872个测试用例》《你不知道的前端图片处理（上）》《你不知道的前端图片处理（下）》《钉钉前端-如何设计前端实时分析及报警系统》《前端实现最佳截图方案（上）》《前端实现最佳截图方案（下）》《Node.js 实现抢票小工具&短信通知提醒（上）「干货」》《Node.js 实现抢票小工具&短信通知提醒（下）「干货」》《那些不常见，但却非常实用的JS知识点（上）》《那些不常见，但却非常实用的JS知识点（下）》《如何为团队定制自己的 Node.js 框架？》《细品原生JS从初级到高级知识点汇总（一）》《细品原生JS从初级到高级知识点汇总（二）》《细品原生JS从初级到高级知识点汇总（三）》《细品原生JS从初级到高级知识点汇总（四）》《学习 jQuery 源码整体架构，打造属于自己的 js 类库》《细说RTSP实现前端直播流探索记「干货」》《一文带你搞懂前端登陆设计》《使用 Node.js 将图片中的苹果变成橘子「实践」》《基于Canvas实现的高斯模糊（上）「JS篇」》《基于Canvas实现的高斯模糊（下）「JS篇」》《由浅入深，66条JavaScript面试知识点（一）》《由浅入深，66条JavaScript面试知识点（二）》《由浅入深，66条JavaScript面试知识点（三）》《由浅入深，66条JavaScript面试知识点（四）》《由浅入深，66条JavaScript面试知识点（五）》《由浅入深，66条JavaScript面试知识点（六）》《由浅入深，66条JavaScript面试知识点（七）》《为什么 setTimeout 有最小时延 4ms ?》《如何处理 Node.js 中出现的未捕获异常？》《Angular v10.0.0 正式发布，不再支持 IE9/10》《基于 Docker 的 SSR 持续开发集成环境实践》《细聊图解webpack 指南手册》《一文带你彻底搞懂 NPM 知识点「进阶篇」》《细聊webpack性能优化面面观》《JS实现各种日期操作方法汇总》《「实践」细聊前端性能优化总结》《「实践」浏览器中的画中画（Picture-in-Picture）模式及其 API》《「多图」一文带你彻底搞懂 Web Workers （上）》《「多图」一文带你彻底搞懂 Web Workers （中）》《深入细聊前端下载总结「干货」》《细品西瓜播放器功能分析（上）「实践」》《细品西瓜播放器功能分析（下）「实践」》《细聊50道JavaScript基础面试题「附答案」》《webpack4主流程源码解说以及动手实现一个简单的webpack（上）》《webpack4主流程源码解说以及动手实现一个简单的webpack（下）》《细聊前端架构师的视野》《细聊应用场景再谈防抖和节流「进阶篇」》《前端埋点统一接入方案实践》《细聊微内核架构在前端的应用「干货」》《一种高性能的Tree组件实现方案「干货」》《进击的JAMStack》《前后端全部用 JS 开发是什么体验（Hybrid + Egg.js经验分享）上》《前后端全部用 JS 开发是什么体验（Hybrid + Egg.js经验分享）中》《前后端全部用 JS 开发是什么体验（Hybrid + Egg.js经验分享）下》《一文带你搞懂 babel-plugin-import 插件（上）「源码解析」》《一文带你搞懂 babel-plugin-import 插件（下）「源码解析」》《JavaScript常用API合集汇总「值得收藏」》《推荐10个常用的图片处理小帮手（上）「值得收藏」》《推荐10个常用的图片处理小帮手（下）「值得收藏」》《JavaScript 中ES6代理的实际用例》《12 个实用的前端开发技巧总结》《一文带你搞懂搭建企业级的 npm 私有仓库》《教你如何使用内联框架元素 IFrames 的沙箱属性提高安全性？》《细说前端开发UI公共组件的新认识「实践」》《细说DOM API中append和appendChild的三个不同点》《细品淘系大佬讲前端新人如何上王者「干货」》《一文带你彻底解决背景跟随弹窗滚动问题「干货」》《推荐常用的5款代码比较工具「值得收藏」》《Node.js实现将文字与图片合成技巧》《爱奇艺云剪辑Web端的技术实现》《我再也不敢说我会写前端 Button组件「实践」》《NodeX Component – 滴滴集团 Node.js 生态组件体系「实践」》《Node Buffers 完整指南》《推荐18个webpack精美插件「干货」》《前端开发需要了解常用7种JavaScript设计模式》《浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务》《了不起的 Webpack HMR 学习指南（上）「含源码讲解」》《了不起的 Webpack HMR 学习指南（下）「含源码讲解」》《10个打开了我新世界大门的 WebAPI（上）「实践」》《10个打开了我新世界大门的 WebAPI（中）「实践」》《10个打开了我新世界大门的 WebAPI（下）「实践」》《「图文」ESLint 在中大型团队的应用实践》《Deno是代码的浏览器，你认同吗？》《前端存储除了 localStorage 还有啥？》《Javascript 多线程编程的前世今生》《微前端方案 qiankun（实践及总结）》《「图文」V8 垃圾回收原来这么简单？》《Webpack 5模块联邦引发微前端的革命？》《基于 Web 端的人脸识别身份验证「实践」》《「前端进阶」高性能渲染十万条数据(时间分片)》《「前端进阶」高性能渲染十万条数据(虚拟列表)》《图解 Promise 实现原理（一）：基础实现》《图解 Promise 实现原理（二）：Promise 链式调用》《图解 Promise 实现原理（三）：Promise 原型方法实现》《图解 Promise 实现原理（四）：Promise 静态方法实现》《实践教你从零构建前端 Lint 工作流「干货」》《高性能多级多选级联组件开发「JS篇」》《深入浅出讲解Node.js CLI 工具最佳实战》《延迟加载图像以提高Web网站性能的五种方法「实践」》《比较 JavaScript 对象的四种方式「实践」》《使用Service Worker让你的 Web 应用如虎添翼（上）「干货」》《使用Service Worker让你的 Web 应用如虎添翼（中）「干货」》《使用Service Worker让你的 Web 应用如虎添翼（下）「干货」》《前端如何一次性处理10万条数据「进阶篇」》《推荐三款正则可视化工具「JS篇」》《如何让用户选择是否离开当前页面？「JS篇」》《JavaScript开发人员更喜欢Deno的五大原因》《仅用18行JavaScript实现一个倒数计时器》《图文细说JavaScript 的运行机制》《一个轻量级 JavaScript 全文搜索库，轻松实现站内离线搜索》《推荐Web程序员常用的15个源代码编辑器》《10个实用的JS技巧「值得收藏」》《细品269个JavaScript小函数，让你少加班熬夜（一）「值得收藏」》《细品269个JavaScript小函数，让你少加班熬夜（二）「值得收藏」》《细品269个JavaScript小函数，让你少加班熬夜（三）「值得收藏」》《细品269个JavaScript小函数，让你少加班熬夜（四）「值得收藏」》《细品269个JavaScript小函数，让你少加班熬夜（五）「值得收藏」》《细品269个JavaScript小函数，让你少加班熬夜（六）「值得收藏」》《深入JavaScript教你内存泄漏如何防范》《手把手教你7个有趣的JavaScript 项目-上「附源码」》《手把手教你7个有趣的JavaScript 项目-下「附源码」》《JavaScript 使用 mediaDevices API 访问摄像头自拍》《手把手教你前端代码如何做错误上报「JS篇」》《一文让你彻底搞懂移动前端和Web 前端区别在哪里》《63个JavaScript 正则大礼包「值得收藏」》《提高你的 JavaScript 技能10 个问答题》《JavaScript图表库的5个首选》《一文彻底搞懂JavaScript 中Object.freeze与Object.seal的用法》《可视化的 JS：动态图演示 – 事件循环 Event Loop的过程》《教你如何用动态规划和贪心算法实现前端瀑布流布局「实践」》《可视化的 js：动态图演示 Promises & Async/Await 的过程》《原生JS封装拖动验证滑块你会吗？「实践」》《如何实现高性能的在线 PDF 预览》《细说使用字体库加密数据-仿58同城》《Node.js要完了吗？》《Pug 3.0.0正式发布，不再支持 Node.js 6/8》《纯JS手写轮播图（代码逻辑清晰，通俗易懂）》《JavaScript 20 年 中文版之创立标准》《值得收藏的前端常用60余种工具方法「JS篇」》《箭头函数和常规函数之间的 5 个区别》《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》《「前端篇」不再为正则烦恼》《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》《深入细品浏览器原理「流程图」》《JavaScript 已进入第三个时代，未来将何去何从？》《前端上传前预览文件 image、text、json、video、audio「实践」》《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》《推荐13个有用的JavaScript数组技巧「值得收藏」》《前端必备基础知识：window.location 详解》《不要再依赖CommonJS了》《犀牛书作者：最该忘记的JavaScript特性》《36个工作中常用的JavaScript函数片段「值得收藏」》《Node + H5 实现大文件分片上传、断点续传》《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》《【实践总结】关于小程序挣脱枷锁实现批量上传》《手把手教你前端的各种文件上传攻略和大文件断点续传》《字节跳动面试官：请你实现一个大文件上传和断点续传》《谈谈前端关于文件上传下载那些事【实践】》《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》《最全的 JavaScript 模块化方案和工具》《「前端进阶」JS中的内存管理》《JavaScript正则深入以及10个非常有意思的正则实战》《前端面试者经常忽视的一道JavaScript 面试题》《一行JS代码实现一个简单的模板字符串替换「实践」》《JS代码是如何被压缩的「前端高级进阶」》《前端开发规范：命名规范、html规范、css规范、js规范》《【规范篇】前端团队代码规范最佳实践》《100个原生JavaScript代码片段知识点详细汇总【实践】》《关于前端174道 JavaScript知识点汇总（一）》《关于前端174道 JavaScript知识点汇总（二）》《关于前端174道 JavaScript知识点汇总（三）》《几个非常有意思的javascript知识点总结【实践】》《都2020年了，你还不会JavaScript 装饰器？》《JavaScript实现图片合成下载》《70个JavaScript知识点详细总结（上）【实践】》《70个JavaScript知识点详细总结（下）【实践】》《开源了一个 JavaScript 版敏感词过滤库》《送你 43 道 JavaScript 面试题》《3个很棒的小众JavaScript库，你值得拥有》《手把手教你深入巩固JavaScript知识体系【思维导图】》《推荐7个很棒的JavaScript产品步骤引导库》《Echa哥教你彻底弄懂 JavaScript 执行机制》《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》《深入解析高频项目中运用到的知识点汇总【JS篇】》《JavaScript 工具函数大全【新】》《从JavaScript中看设计模式(总结)》《身份证号码的正则表达式及验证详解(JavaScript，Regex)》《浏览器中实现JavaScript计时器的4种创新方式》《Three.js 动效方案》《手把手教你常用的59个JS类方法》《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》《深入浅出讲解 js 深拷贝 vs 浅拷贝》《手把手教你JS开发H5游戏【消灭星星】》《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》《手把手教你全方位解读JS中this真正含义【实践】》《书到用时方恨少，一大波JS开发工具函数来了》《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》《手把手教你JS 异步编程六种方案【实践】》《让你减少加班的15条高效JS技巧知识点汇总【实践】》《手把手教你JS开发H5游戏【黄金矿工】》《手把手教你JS实现监控浏览器上下左右滚动》《JS 经典实例知识点整理汇总【实践】》《2.6万字JS干货分享，带你领略前端魅力【基础篇】》《2.6万字JS干货分享，带你领略前端魅力【实践篇】》《简单几步让你的 JS 写得更漂亮》《恭喜你获得治疗JS this的详细药方》《谈谈前端关于文件上传下载那些事【实践】》《面试中教你绕过关于 JavaScript 作用域的 5 个坑》《Jquery插件（常用的插件库）》《【JS】如何防止重复发送ajax请求》《JavaScript+Canvas实现自定义画板》《Continuation 在 JS 中的应用「前端篇」》作者： 徐小夕转发链接：https://mp.weixin.qq.com/s/XHwOHf498t6ZNfDLiwZ6Xg