Reveal.js

HTML展现ppt效果的框架

Created by Hakim El Hattab / @hakimel

概述

reveal.js 能让你用HTML构建漂亮的交互式幻灯片。
这个页面将会告诉你怎么做!

垂直幻灯片

幻灯片可以相互嵌套

space 键播放幻灯片


Down arrow

地下1层

嵌套幻灯片可以添加额外的详细信息,下面是有用的高水平下滑

地下2层

现在,是时候往上了


Up arrow

幻灯片

不是程序员? 没关系,这里有可视化界面编辑的网站 http://slides.com.

视图焦点

点击 ESC 可以查看幻灯片的综述

按住 Alt 不放,单击鼠标左键到屏幕 这里
Alt + 单击鼠标左键到屏幕任意位置返回。

触摸优化

ppt在触摸设备上看起来效果很好,比如手机和平板电脑。简单的滑动幻灯片。

Fragments

点击下一个箭头...

... 下一步 ...

... a fragmented slide.

Fragment 样式

有许多不同样式的 fragments, 比如:

grow

shrink

fade-out

current-visible

highlight-red

highlight-blue

过渡样式

你可以选择不同的过渡样式, 比如:
None - Fade - Slide - Convex - Concave - Zoom

主题

reveal.js 有如下主题可选:
Black (default) - White - League - Sky - Beige - Simple
Serif - Blood - Night - Moon - Solarized

背景

设置 data-background="#dddddd" 改变ppt的背景颜色. 所有CSS颜色标签都支持。

Down arrow

图片背景

<section data-background="image.png">

平铺的图片背景

<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">

视频背景

<section data-background-video="video.mp4,video.webm">

GIF图片背景!

背景过渡

可以选择不同的背景过渡,下面这种是 "zoom".

Reveal.configure({ backgroundTransition: 'zoom' })

背景过渡

你可以给每一页ppt设置不同的背景过渡.

<section data-background-transition="zoom">

漂亮的代码样式


function linkify( selector ) {
if( supports3DTransforms ) {

var nodes = document.querySelectorAll( selector );

for( var i = 0, len = nodes.length; i < len; i++ ) {
  var node = nodes[i];

  if( !node.className ) {
    node.className += ' roll';
  }
 }
 }
}
					

语法高亮的代码highlight.js.

无序列表

  • No order here
  • Or here
  • Or here
  • Or here

有序列表

  1. One is smaller than...
  2. Two is smaller than...
  3. Three!

表格

物品 价格 数量
苹果 $1 7
柠檬 $2 18
面包 $3 2

引用

有两种形式的引用, 内联的: “The nice thing about standards is that there are so many to choose from”

和成块的引用:
“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

链接跳转

你可以链接跳转到ppt内部的某一页, 点击这里.

演讲者模式

这里有一种演讲者模式. 它包括计时器, 预览即将到来的下一页ppt或者笔记.

按住 s 试一试.

输出pdf

可以输出 PDF,下面是例子:

全局状态

设置 data-state="something" 在ppt上 "something" 会在ppt打开的时候作为一个class加到每一个文件元素里.

状态事件

另外可以触发自定义事件绑定在每张幻灯片的上的 data-state 值.


Reveal.addEventListener( 'customevent', function() {
	console.log( '"customevent" has fired' );
} );
					

花点时间

点击 B 或者 . 暂停演示.

更多支持

结束

- 试试在线编辑器
- 源代码 & 文件