reveal.js
不多废话,直接进入正题。
Reveal.js是什么
一个使用HTML语言制作演示文稿的Web框架,支持插入多种格式的内容,并以类似PPT的形式呈现。
为什么要用 Reveal.js
优点
- 制作灵活、不限应用,只需修改
HTML
文件 - 发布灵活、不限平台,只需打开
HTML
文件 - 丰富的特性,支持过渡动画、代码高亮、视频背景、Markdown 语法、导出 PDF 等
- 极度轻量,占用空间和内存少
缺点
需要粗浅地掌握markdown
以及html
但是跟着教程,十分钟搞明白,半个小时掌握基本用法不是问题。
怎么样用 Reveal.js
下载
进入reveal.js官网,进入下载界面,里面有详细教程,按照步骤操作即可。
除了下载教程之外,还有很多模块的介绍、教程和展示,比如 Media、Code、Math、themes、transitions 等等
打开index.html
先找到index.html的位置,然后用一个文本编辑器打开(不要用浏览器打开哦)。
看看结构
在改动前,index.html 文件中也就只有四十行代码,如下图。
从打开的效果图中我们可以看到,整个html分为部分:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
<head>...</head>
为对该文档的说明,
<body>...</body>
是演示的主要内容。
我们的所有“大动干戈”都在<body>...</body>
的Line19 ~ Line20
之间完成。
注意哦,只要改动18行和21行之间的内容就行啦
准备
首先要保证一点,我们要使用制表符来缩进,不仅是为了代码的美观,也是为了我们自己在套娃的时候整得清楚明白。
另外,我们得明确,前后标签名得保持一致,如<标签名>内容</标签名>
。
分页
Reveal.js
里页面有两种页面类型,横向的一级页面、纵向的子页面。
后者务必嵌套在前者里面。所谓的纵横比较好理解,键盘上的左右箭头控制一级页面,上下键移动子页面。
一级页面以下代码实现:
<section>
一级页面
</section>
或者
<sections>一级页面</sections>
二级页面如同套娃:
<section>
<section>二级页面1</section>
<section>二级页面2</section>
</section>
Markdown
在<section>
里面添加data-markdown
属性,表示该段内容用Markdown引擎解析。
用法一: 排版
下面列举一些基础的
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
1. 第一点
2. 第二点
3. 第三点
* 无序表
用法二:插入
<section data-markdown>
Area A
</section>
然后在Area A
处使用markdown
语法即可。
插入图片、代码块、序列表都ok的。
转场动画
如同调用Markdown渲染引擎一样,只要为<section>
标签data-transition
属性就ok。
<section data-transition="参数">
内容
</section>
参数集合
- fede
- slide(default)
- convex
- concave
- zoom
- none(停用动画)
当然还有下面一些高级操作:
<section data-transition-speed="fast">
<h2>Choose from three transition speeds: default, fast or slow!</h2>
</section>
<section data-transition="slide-in fade-out">
and stops.
</section>
背景
纯色背景
<section data-background-color="aquamarine">
<h2>🐟</h2>
</section>
<section data-background-color="rgb(70, 70, 255)">
<h2>🐳</h2>
</section>
图片背景
<section data-background-image="http://example.com/image.png">
<h2>Image</h2>
</section>
<section data-background-image="http://example.com/image.png"
data-background-size="100px" data-background-repeat="repeat">
<h2>This background image will be sized to 100px and repeated</h2>
</section>
Attribute | Default | Description |
---|---|---|
data-background-image | URL of the image to show. GIFs restart when the slide opens. | |
data-background-size | cover | See background-size on MDN. |
data-background-position | center | See background-position on MDN. |
data-background-repeat | no-repeat | See background-repeat on MDN. |
data-background-opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
视频背景
<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4"
data-background-video-loop data-background-video-muted>
<h2>Video</h2>
</section>
Attribute | Default | Description |
---|---|---|
data-background-video | A single video source, or a comma separated list of video sources. | |
data-background-video-loop | false | Flags if the video should play repeatedly. |
data-background-video-muted | false | Flags if the audio should be muted. |
data-background-size | cover | Use cover for full screen and some cropping or contain for letterboxing. |
data-background-opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
最后
保存index.html
文件,然后用浏览器打开它,就可以看到效果啦。
index.html
一定要在原来的目录下哦