reveal.js 入门使用方法

程序员做PPT不需要 PowerPoint，

reveal.js是能够让我们很轻易地使用 HTML 创建一个漂亮的演示文稿的插件

1. 上官网 https://revealjs.com/

2. 下载 https://github.com/hakimel/reveal.js/releases

我下载的是最新版（4.0.2）解压到相对应的文件夹，

3. 新建一个文件夹，将 dist，plugin 文件夹移过去。新建 index.html，因为要用到图片比较多，可以在根目录下新建一个 img 文件夹。之后的目录

index.html 基本样式

<html><head>// 引入样式文件<link rel="stylesheet" href="dist/reveal.css">// 主题颜色（可自主选择）<link rel="stylesheet" href="dist/theme/serif.css">
</head><body><div class="reveal"><div class="slides"></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>Reveal.initialize({hash: true,// 是否在右下角展示控制条controls: true,// 是否显示演示的进度条progress: true,// 是否显示当前幻灯片的页数slideNumber: 'c/t',plugins: [RevealMarkdown, RevealHighlight, RevealNotes]});</script>
</body></html>

主题选择

1. 一个`<section>`标签就是一张ppt。

2. reveal的动画有`grow，shrink，fade-out，fade-right，fade-up，fade-down，fade-left，fade-in-then-out，fade-in-then-semi-out`

3. Markdown支持需要加载Markdown.js插件，并且在section标签中加入data-markdown属性。

4. 代码高亮需要加载插件highlight.js

5. 可以单独给每个section设置背景，包括背景颜色，背景图片，视频

第一页

<section data-background-image="./img/flower.webp" data-background-opacity=".4"><h1>奶油桃子</h1><p>认真活着</p>
</section>

第二页

<section><p class="fragment grow">安静</p><p class="fragment shrink">懂事</p><p class="fragment fade-out">乖乖女</p><p><span style="display: inline-block;" class="fragment fade-right">自卑</span><span style="display: inline-block;" class="fragment fade-up">没有安全感</span><span style="display: inline-block;" class="fragment fade-down">委曲求全</span><span style="display: inline-block;" class="fragment fade-left">不合群</span></p><h3 class="fragment fade-in-then-out">这些才是我</h3><h3 class="fragment fade-in-then-semi-out">往后的我</h3><p><span class="fragment highlight-red">努力向上</span> <spanclass="fragment highlight-blue">认真学习</span> <span class="fragment
highlight-green">向阳生活</span></p>
</section>

第三页

<section><section data-transition="fade" data-background-color="#CCFBFF"><h2>伸手不可得，山月与故人</h2></section><section data-transition="convex" data-background-color="#EF96C5"><h2>春昼短，秋夜长，从此余生好景独看</h2></section><section data-transition="concave" data-background-color="#EAD6EE"><h2>知世故而不世故，善自嘲而不嘲人</h2></section><section data-transition="zoom" data-background-color="#A0F1EA"><h2>观星觅云难悲喜，闻风听雨也见你</h2></section>
</section>

第四页

<section data-background-video="./video/78fe4697fee594518c458479e9b7f17a.mp4"
data-background-video-loopdata-background-video-muted>
</section>

第五页

<section><h1>JavaScript</h1><pre><code data-trim data-noescape>if (meetMe || !meetMe) {await there({me: {sad: null,happy: null}})}if (missMe || !missMe) {await there({feeling: {left: 0,right: 0}})}if (loveMe || !loveMe) {await there({feeling: Infinity})}if (withMe || !withMe) {const tomorrow = {we: myHands && yourHands}Object.freeze(tomorrow)}if (myArms.has(you)) {yourHeart.push(me)}</code></pre>
</section>

第六页

<section data-background-image="./img/paper-flower.webp" data-background-opacity=".4"><p class="fragment">你见，或者不见我 我就在那里 不悲不喜</p><p class="fragment">你念或者不念我 情就在那里 不来不去</p><p class="fragment">你爱，或者不爱我 爱就在那里 不增不减</p><p class="fragment">你跟，或者不跟我</p><p class="fragment">我的手就在你手里</p><p class="fragment">不舍不弃</p><p class="fragment">来我的怀里</p><p class="fragment">或者</p><p class="fragment">让我住进你的心里</p>
</section>

配置初始项
需在页面底部初始化 reveal，所有配置项均为可选，默认值如下：

Reveal.initialize({// 在右下角显示控制面板controls: true,// 显示演示进度条progress: true,// 显示幻灯片页码// 可使用代码 slideNumber: 'c/t'，表示 '当前页/总页数'slideNumber: false,// 幻灯片切换时写入浏览器历史记录history: false,// 启用键盘快捷键keyboard: true,// 启用幻灯片概览overview: true,// 幻灯片垂直居中center: true,// 在触屏设备上启用触摸滑动切换touch: true,// 循环演示loop: false,// 演示方向为右往左，即向左切换为下一张，向右切换为上一张rtl: false,// 打乱幻灯片顺序shuffle: false,// 启用幻灯片分段fragments: true,// 演示文稿是否运行于嵌入模式（如只占页面的一部分）// 译者注：与触屏相关// false：所有在演示文稿上触发的 "touchmove" 的默认行为都会被阻止// true：只有在 "touchmove" 触发了演示文稿事件时才会阻止默认行为embedded: false,// 是否在按下 ? 键时显示快捷键帮助面板help: true,// 演讲备注是否对所有人可见showNotes: false,// 两个幻灯片之间自动播放的时间间隔（毫秒），当设置为 0 时，则禁止自动播放。// 该值可以被幻灯片上的 `data-autoslide` 属性覆盖autoSlide: 0,// 允许停止自动播放// 在手动切换分段或幻灯片后暂停自动播放// 按 a 键暂停或恢复自动播放autoSlideStoppable: true,// 使用该函数执行自动播放操作autoSlideMethod: Reveal.navigateNext,// 启用鼠标滚轮切换幻灯片，作用与 SPACE 相同mouseWheel: false,// 在移动设备上隐藏地址栏hideAddressBar: true,// 在 iframe 预览弹框中打开链接previewLinks: false,// 切换过渡效果// none-无/fade-渐变/slide-飞入/convex-凸面/concave-凹面/zoom-缩放transition: 'slide', // none/fade/slide/convex/concave/zoom// 切换过渡速度// default-中速/fast-快速/slow-慢速transitionSpeed: 'default', // default/fast/slow// 背景切换过渡效果backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom// 预加载幻灯片数viewDistance: 3,// 视差背景图parallaxBackgroundImage: '', // 示例："'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"// 视察背景图尺寸parallaxBackgroundSize: '', // CSS 写法，示例："2100px 900px"（目前只支持像素值，不支持 % 和 auto）// 相邻两张幻灯片间，视差背景移动的像素值// - 如果不设置则自动计算// - 当设置为 0 时，则禁止视差动画parallaxBackgroundHorizontal: null,parallaxBackgroundVertical: null});

参考文章 https://www.cnblogs.com/joyco773/p/9182189.html，

参考文章 https://www.cnblogs.com/lfri/p/12258515.html

reveal.js 入门使用方法相关推荐

js入门·对象属性方法大总结
数组(Array):系列元素的有序集合: 详细演示请看:[js入门系列演示·数组 ] http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.ht ...
如何使用Emacs Org模式和Reveal.js创建幻灯片
在过去的一年左右的时间里,我开始大量重新使用Emacs和Org模式包(用于记录笔记,组织自己等等). 我也开始将脚趾浸入水中,进行简短的演讲. 我一直在想如何将Emacs与演讲结合起来. 演示与文本编 ...
基于docker+reveal.js搭建一个属于自己的在线ppt网站
前言最近热衷于Docker,由于这段时间使用Docker来折腾自己的服务器,越来越感觉这是一种极其被应该推广的技术,因此想在公司内部也做一次技术分享.当然,如果只是做的PPT,我就不写这文章了.既然 ...
twig 调用php函数,twig里使用js变量的方法
本文实例讲述了twig里使用js变量的方法的方法.分享给大家供大家参考,具体如下: 先看一段代码这个ajax请求的地址,无法正常正常访问. 这段代码里 jQuery("#my_input& ...
js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
js 复制图片_不会做ppt？Reveal.js让你复制粘贴另类拉风，简洁优雅又低调
要了解一个新知识我们可以从三个方面入手:是什么,有什么用,怎么用.下面我们就从这三个方面进行讲解Reveal.js Reveal.js是什么它是一个专门用来做 HTML 演示文稿的框架,通俗的讲它是 ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
node.js入门 - 9.api：http
node一个重要任务是用来创建web服务,接下来我们就学习与此相关的一个重要的api -- http.我们使用http.createServer()创建一个http服务的实例,用来处理来自客户的请求. ...
《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记
最近想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序,所以需要在本地搭建Node.js Web的开发测试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴 ...

reveal.js 入门使用方法

1. 上官网 https://revealjs.com/

2. 下载 https://github.com/hakimel/reveal.js/releases

我下载的是最新版（4.0.2）解压到相对应的文件夹，

3. 新建一个文件夹，将 dist，plugin 文件夹移过去。新建 index.html，因为要用到图片比较多，可以在根目录下新建一个 img 文件夹。之后的目录

index.html 基本样式

1. 一个`<section>`标签就是一张ppt。

2. reveal的动画有`grow，shrink，fade-out，fade-right，fade-up，fade-down，fade-left，fade-in-then-out，fade-in-then-semi-out`

3. Markdown支持需要加载Markdown.js插件，并且在section标签中加入data-markdown属性。

4. 代码高亮需要加载插件highlight.js

5. 可以单独给每个section设置背景，包括背景颜色，背景图片，视频

第一页

第二页

第三页

第四页

第五页

第六页

参考文章 https://www.cnblogs.com/joyco773/p/9182189.html，

参考文章 https://www.cnblogs.com/lfri/p/12258515.html

reveal.js 入门使用方法相关推荐

最新文章

热门文章

reveal.js 入门使用方法

1. 上官网 https://revealjs.com/

2. 下载 https://github.com/hakimel/reveal.js/releases

我下载的是最新版（4.0.2）解压到相对应的文件夹，

3. 新建一个文件夹，将 dist，plugin 文件夹移过去。新建 index.html，因为要用到图片比较多，可以在根目录下新建一个 img 文件夹。之后的目录

index.html 基本样式

1. 一个<section>标签就是一张ppt。

2. reveal的动画有grow，shrink，fade-out，fade-right，fade-up，fade-down，fade-left，fade-in-then-out，fade-in-then-semi-out

3. Markdown支持需要加载Markdown.js插件，并且在section标签中加入data-markdown属性。

4. 代码高亮需要加载插件highlight.js

5. 可以单独给每个section设置背景，包括背景颜色，背景图片，视频

第一页

第二页

第三页

第四页

第五页

第六页

参考文章 https://www.cnblogs.com/joyco773/p/9182189.html，

参考文章 https://www.cnblogs.com/lfri/p/12258515.html

reveal.js 入门使用方法相关推荐

最新文章

热门文章

1. 一个`<section>`标签就是一张ppt。

2. reveal的动画有`grow，shrink，fade-out，fade-right，fade-up，fade-down，fade-left，fade-in-then-out，fade-in-then-semi-out`