reveal.js的使用

reveal.js的使用

  • 如何用reveal.js写一个PPT
    • 开始使用
    • reveal.js写法介绍
      • 如何写动画
    • 动态切换过场动画
    • 动态切换主题
    • Markdown支持
    • 代码高亮
    • 设置背景
    • 嵌入其他页面
    • 最后是初始化
    • 一些常用配置说明

如何用reveal.js写一个PPT

reveal.js是一个能够帮助我们很轻易地使用 HTML 创建一个漂亮的演示文稿的插件
git: https://github.com/hakimel/reveal.js/releases

开始使用

首先下载reveal.js
这是它的目录结构reveal.js的使用_第1张图片

我们需要的东西就在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是必须加的,你也可以去自己自定义动画

grow

shrink

fade-out

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

动态切换过场动画

None - Fade - Slide - Convex - Concave - Zoom

就是这么简单,把动画名添加到链接上,reveal.js会帮你做切换

动态切换主题

Black(default) -
White
League
Sky
Beige
Simple
Serif
Blood
Night
 Moon
Solarized

原理就是改变head中 id='theme’的那个css链接

Markdown支持

# 一级标题 ## 二级标题

Markdown支持需要加载Markdown.js插件并且在section标签中加入data-markdown属性,但是好像markdown的功能支持的不是很好的亚子

代码高亮

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

	
		在这里写代码就能高亮, 当然记住要包在section里
	

设置背景

可以单独给每个section设置背景,包括背景颜色,背景图片,甚至可以放视频

这是背景 颜色
这是背景图片
这是背景视频,视频支持.mp4.webm.gif格式

嵌入其他页面

最后是初始化

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

你可能感兴趣的:(js)