HTML 演示框架

Hakim El Hattab 和 贡献者 创建

赞助商

你好

reveal.js 允许你使用 HTML 创建美观且互动的幻灯片组。此演示文稿将向你展示它能做什么。

垂直幻灯片

幻灯片可以在彼此内部嵌套。

使用 空格 键浏览所有幻灯片。


Down arrow

地下室级别 1

嵌套幻灯片适用于在一个高级水平幻灯片下方添加其他详细信息。

地下室级别 2

就是这样，回到上一级。


Up arrow

幻灯片

不是程序员？没问题。有一个功能齐全的可视化编辑器用于创建这些幻灯片，在 https://slides.com 进行尝试。

漂亮的代码


                import React, { useState } from 'react';

                function Example() {
                  const [count, setCount] = useState(0);

                  return (
                    ...
                  );
                }

代码语法着色由 highlight.js 提供。

更漂亮的动画


                import React, { useState } from 'react';

                function Example() {
                  const [count, setCount] = useState(0);

                  return (
                    <div>
                      <p>You clicked {count} times</p>
                      <button onClick={() => setCount(count + 1)}>
                        Click me
                      </button>
                    </div>
                  );
                }

                function SecondExample() {
                  const [count, setCount] = useState(0);

                  return (
                    <div>
                      <p>You clicked {count} times</p>
                      <button onClick={() => setCount(count + 1)}>
                        Click me
                      </button>
                    </div>
                  );
                }

视点

按 ESC 键进入幻灯片概述。

按住 alt 键（在 Linux 下按住 ctrl 键），然后单击任何元素可使用 zoom.js 缩放该元素。再次单击可缩小。

（注意：在 Linux 下使用 ctrl + 单击。）

自动动画

使用 自动动画 在幻灯片之间自动动画匹配的元素。

自动动画

自动动画

触屏优化

演示文稿在触屏设备上（如手机和平板电脑）上显示效果极佳。只需滑动屏幕即可浏览幻灯片。

添加 r-fit-text 类可自动调整文本大小

调整文字大小

分段

点击箭头...

... 以逐步浏览...

... a 分段 幻灯片。

分段样式

有不同类型的分段，比如

放大

缩小

淡出

向右淡出, 向上, 向下, 向左

淡入再淡出

淡入再半淡出

高亮 红色 蓝色 绿色

过渡样式

你可以选择不同的过渡，比如
无 - 淡入淡出 - 滑动 - 凸面 - 凹面 - 缩放

幻灯片背景

在幻灯片上设置 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 选项提供不同的背景过渡。这是一个名为“放大”的过渡。

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

背景过渡

可以为每个幻灯片覆盖背景过渡。

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

Iframe 背景

由于 reveal.js 运行在网络上，因此可以轻松嵌入其他网络内容。尝试与背景中的页面进行交互。

神奇的列表

  • 这里没有顺序
  • 这里也没有
  • 这里也没有
  • 这里也没有

美妙的有序列表

  1. 一个比...小
  2. 两个比...小
  3. 三个！

表格

项目值数量
苹果$17
柠檬水$218
面包$32

妙语

这些家伙有两种形式，内联： 标准的优点是，有许多可供选择 和块

“多年来，一直有一种理论，即在数百万台打字机上随机键入的数百万只猴子会重现莎士比亚的全部著作。事实证明，互联网证明了这个理论是错误的。”

星际互连

可以在幻灯片之间进行内部链接， 就像这样。

演讲者视图

有一个 演讲者视图。它包括一个计时器、即将出现的幻灯片的预览以及演讲者笔记。

按 S 键试用。

导出为 PDF

可以将演示文稿 导出为 PDF，这是一个例子

全局状态

在幻灯片上设置 data-state="something"，当幻灯片打开时，"something" 将作为类添加到文档元素。这使你可以应用更广泛的样式更改，例如切换页面背景。

状态事件

此外，可以通过绑定到 data-state 名称，按幻灯片为基础触发自定义事件。


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

稍加休息

按键盘上的 B 或 . 暂停演示。当你在台上时，这很有用，可以将分散注意力的幻灯片从屏幕上移开。

更多精彩

结束

- 试用在线编辑器
- 源代码和文档

在网上创建炫丽的演示文稿

reveal.js 是一个开源 HTML 演示文稿框架。这是一个工具，使任何拥有网络浏览器的用户都可以免费创建功能齐全且美观的演示文稿。

使用 reveal.js 制作的演示文稿基于开放的网络技术。这意味着您可以在网络上执行任何操作，可以在演示文稿中执行。使用 CSS 更改样式，使用 <iframe> 包含一个外部网页，或使用我们的 JavaScript API 添加自己的自定义行为。

该框架具有广泛的功能，包括 嵌套幻灯片、Markdown 支持、自动动画、PDF 导出、演讲者注释、LaTeX 支持 和 语法高亮代码。

准备好开始了吗？

只需一分钟即可设置。了解如何在 安装说明 中创建第一个演示文稿！

在线编辑器

如果您想要享受 reveal.js 的好处，而不必编写 HTML 或 Markdown，请尝试 https://slides.com。它是一个功能齐全的可视化编辑器和平台，适用于 reveal.js，由同一创作者创建。

支持 reveal.js

本项目由 @hakimel 启动并维护，得益于社区中的众多 贡献。支持此项目最佳方法是 成为 Slides.com 的付费会员——这是 Hakim 构建的 reveal.js 演示平台。