Reveal.js

HTML平台上的演示文稿框架

Hakim El Hattab / @hakimel制作

Hello There

reveal.js让你可以使用HTML创建一个漂亮的交互式幻灯片,这个演示文稿展示了它的效果。

竖直滚动幻灯片

某些幻灯片可以包含在某张幻灯片竖直下方。

使用Space键可以遍历所有的幻灯片。


Down arrow

地下一层

下方的幻灯片通常用来对顶层幻灯片做进一步的说明。

地下二层

好了,到底了。


Up arrow

幻灯片

如果你不懂代码也不要紧,我们提供了一个全功能的在线可视化编辑器——http://slides.com.

缩放功能

ESC键可以进入幻灯片总览视图。

按住alt键并点击幻灯片上的任意元素可以对它进行放大(此处使用了zoom.js),Alt + 点击任意位置可以恢复原状。

对触摸的优化

对触摸设备支持的很好,可以通过滑动控制幻灯片。

片段

点击Hit the next arrow...

... to step through ...

... a fragmented slide.

片段样式

有以下几种不同的样式:

grow

shrink

fade-out

fade-up (also down, left and right!)

current-visible

Highlight red blue green

过渡效果

你可以选择使用不同的过渡效果,包括:
None - Fade - Slide - Convex - Concave - Zoom

主题

reveal.js包含一些内置的主题:
Black (default) - White - League - Sky - Beige - Simple
Serif - Blood - Night - Moon - Solarized

幻灯片背景

设置幻灯片 data-background="#dddddd" 可以改变背景颜色。支持所有的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图像背景!

背景切换效果

通过backgroundTransition选项可以设置不同的背景切换效果,现在使用的叫做"zoom"。

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

背景切换效果

你可以在每张幻灯片上使用不同的背景切换效果。

<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!

扁平化的表格

Item Value Quantity
Apples $1 7
Lemonade $2 18
Bread $3 2

引用

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from” and block:

“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.”

幻灯片间的链接

你可以将两张幻灯片链接在一起, 就像这样

Speaker View

There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

导出为PDF

演示文稿可以被导出为PDF, 下面是一个示例:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.


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

休息一会!

按下键盘上的B或.可以暂停,This is helpful when you're on stage and want to take distracting slides off the screen.

还有更多

- 试一下在线编辑器
- 源代码& 文档