Reveal.js

HTML平台上的演示文稿框架

由Hakim El Hattab / @hakimel制作

Hello There

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

幻灯片

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

缩放功能

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

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

对触摸的优化

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

过渡效果

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

主题

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

背景切换效果

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

扁平化的表格

引用

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.

还有更多

• Right-to-left support
• Extensive JavaScript API
• Auto-progression
• Parallax backgrounds
• Custom keyboard bindings

完

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