如何用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/zoomdependencies: [{ 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

reveal.js的使用相关推荐

Reveal.js一个用来做WEB演示文稿的框架
reveal.js是一个能够帮助我们很轻易地使用HTML来创建漂亮的演示效果,也就是我们常见的PPT幻灯片.reveal.js不依赖其他任何javascript库,是一个独立的javascript插件 ...
使用reveal.js制作PPT，并部署至GitHub
折腾了一天把PPT做好,经历千辛万苦终于上传到Github上实现预览,记下啦,以免下次再用的时候忘掉制作PPT 一.安装reveal.js 1.基本安装(我觉得写个PPT,基本安装就可以啦) clo ...
js 复制图片_不会做ppt？Reveal.js让你复制粘贴另类拉风，简洁优雅又低调
要了解一个新知识我们可以从三个方面入手:是什么,有什么用,怎么用.下面我们就从这三个方面进行讲解Reveal.js Reveal.js是什么它是一个专门用来做 HTML 演示文稿的框架,通俗的讲它是 ...
放弃 PowerPoint，改用 reveal.js
PPT(PowerPoint)微软出的办公软件,这么长时间我用了不超过三次 ,功能强大,但是对于一般人来说根本用不到那么多的功能,于是就发现了reveal.js(扣题) reveal.js 可能很多人 ...
【前端学习日记】用reveal.js实现制作网页幻灯片
一.效果展示今天学习reveal.js做了一个简单的网页幻灯片,至于reveal.js是什么,可以去这里看看https://revealjs.com/. 话不多说,上图: 二.重要代码讲解 1.导入 ...
Reveal.js：把你的 Markdown 文稿变成 PPT
Reveal.js:把你的 Markdown 文稿变成 PPT https://github.com/hakimel/reveal.js 通过 Reveal.js 这个框架, 我们可以把 Markdo ...
如何使用Emacs Org模式和Reveal.js创建幻灯片
在过去的一年左右的时间里,我开始大量重新使用Emacs和Org模式包(用于记录笔记,组织自己等等). 我也开始将脚趾浸入水中,进行简短的演讲. 我一直在想如何将Emacs与演讲结合起来. 演示与文本编 ...
支持javascript的ppt软件_强大CSS3的3D幻灯片工具reveal.js(推荐)
reveal.js是一个基于CSS3的3D幻灯片工具.Reveal.JS是Hakim El Hattab开发的一个演示文稿制作工具,能够制作绚丽的演示文稿并生成HTML格式,将它发布到web上.它使用 ...
弹出ifame页面(jquery.reveal.js)
1 <body> 2 <a data-reveal-id="myModalDailyModify" data-animation="fade" ...
Reveal.js HTML5炫酷幻灯片
用reveal.js和HTML5制作幻灯片,炫到没朋友! 1.首先下载reveal.js,然后引入 2.在index.html里面引入css和js,我写的简单demo如下: <!DOCTYPE ...

reveal.js的使用