reveal.js的使用
如何用reveal.js写一个PPT
reveal.js是一个能够帮助我们很轻易地使用 HTML 创建一个漂亮的演示文稿的插件
git: https://github.com/hakimel/reveal.js/releases
开始使用
首先下载reveal.js
这是它的目录结构
我们需要的东西就在js文件夹和plugin文件夹和css文件夹里面
然后新建一个工程,把我们需要的东西挪过去
reveal.js写法介绍
在头文件引入这些css文件
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css">
然后开始写body
<div class="reveal">
<div class="slides">
我们的所有内容都要写在这里
</div>
</div>
一个<section>标签就是一张ppt
<section>里面嵌套<section>就可以上下翻页
比如
<section>
<section>
第一页
</section>
<section>
第二页
</section>
</section>
如何写动画
reveal自带的动画有grow,shrink,fade-out,fade-right,fade-up,fade-down,fade-left,fade-in-then-out,fade-in-then-semi-out
// 就是给你需要添加动画的文字加上对应的ckass
// 并且fragment是必须加的,你也可以去自己自定义动画
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment fade-out">fade-out</p>
<p>
<span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
<span style="display: inline-block;" class="fragment fade-up">up, </span>
<span style="display: inline-block;" class="fragment fade-down">down, </span>
<span style="display: inline-block;" class="fragment fade-left">left</span>
</p>
<p class="fragment fade-in-then-out">fade-in-then-out</p>
<p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
动态切换过场动画
<p>
<a href="?transition=none#/transitions">None</a> -
<a href="?transition=fade#/transitions">Fade</a> -
<a href="?transition=slide#/transitions">Slide</a> -
<a href="?transition=convex#/transitions">Convex</a> -
<a href="?transition=concave#/transitions">Concave</a> -
<a href="?transition=zoom#/transitions">Zoom</a>
</p>
就是这么简单,把动画名添加到链接上,reveal.js会帮你做切换
动态切换主题
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black(default)</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>
原理就是改变head中 id='theme’的那个css链接
Markdown支持
<section data-markdown>
# 一级标题
## 二级标题
</section>
Markdown支持需要加载Markdown.js插件并且在section标签中加入data-markdown属性,但是好像markdown的功能支持的不是很好的亚子
代码高亮
代码高亮需要加载插件highlight.js
<pre>
<code>
在这里写代码就能高亮, 当然记住要包在section里
</code>
</pre>
设置背景
可以单独给每个section设置背景,包括背景颜色,背景图片,甚至可以放视频
<section data-background="#ddd">
这是背景 颜色
</section>
<section data-background="./images.jpg">
这是背景图片
</section>
<section data-background-video="./MP4/mp4.mp4">
这是背景视频,视频支持.mp4.webm.gif格式
</section>
嵌入其他页面
<section data-background-iframe="http://www.someurl.com/" data-background-interactive>
</section>
最后是初始化
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
dependencies: [
{ src: 'plugin/markdown/marked.js', condition: function () { return !!document.querySelector('[data-markdown]'); } },
{ src: 'plugin/markdown/markdown.js', condition: function () { return !!document.querySelector('[data-markdown]'); } },
{ src: 'plugin/highlight/highlight.js', async: true },
{ src: 'plugin/search/search.js', async: true },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
一些常用配置说明
字段 | 类型 | 作用 | 默认 |
---|---|---|---|
controls | boolean | 显示箭头 | true |
controlsTutorial | boolean | 箭头更友好的动画 | true |
controlsLayout | string | 箭头的位置 | ‘bottom-right’ |
controlsBackArrows | string | 后退箭头的样式 | ‘fade’ |
progress | boolean | 进度条 | true |
slideNumber | boolean | 在右下角显示页数 | false |
keyboard | boolean | 是否键盘控制 | true |
disableLayout | boolean | 取消reveal.js的默认布局 | false |
center | boolean | 上下左右居中 | true |
fragments | boolean | 是否逐帧播放动画 | true |
transition | string | 默认的过场动画 | slide |
transitionSpeed | string | 过场动画速度 | default 可选default/fast/slow |
backgroundTransition | string | 背景切换动画 | fade可选none/fade/slide/convex/concave/zoom |