HTML 簡報框架

由 Hakim El Hattab 與 貢獻者們 開發

由 贊助

哈囉

Reveal.js 讓您能夠使用 HTML 建立精美的互動式簡報。這個範例將向您展示其功能。

垂直幻燈片

幻燈片可以相互嵌套。

使用 空白 鍵來瀏覽不同頁面


Down arrow

地下一樓

嵌套幻燈片非常適合在大量資訊的母幻燈片下添加額外的細節。

地下二樓

就醬，該上去了


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 + 點擊。）

自動動畫

使用 自動動畫 在幻燈片之間為匹配的元素添加自動動畫。

自動動畫

自動動畫

支援觸控

簡報在手機和平板電腦等觸控設備上也看起來非常棒。只需用手指滑動即可切換幻燈片。

添加 class r-fit-text 來自動調整字體大小

FIT TEXT

片段

點擊下一個箭頭...

...來逐步展示...

...一個 分段的 幻燈片。

片段動畫

有不同類型的片段動畫，比如：

放大

縮小

淡出

向右淡出， 向上， 向下， 向左

先淡入再淡出

先淡入再半透明淡出

突顯 紅色 藍色 綠色

轉場動畫

你可以選擇不同的轉場動畫
無 - 淡入 - 滑入 - 凸出 - 凹陷 - 放大

背景

加入 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">

... 還有 GIFs!

背景轉場

透過 backgroundTransition 參數可以實現不同的背景轉換動畫。如這就是所謂的「縮放」。

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

背景轉場

您可以覆蓋每張投影片的背景轉換。

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

Iframe 背景

由於 Reveal.js 在網頁中運行，因此您可以輕鬆嵌入其他網路內容。嘗試與後台頁面互動。

精彩的無序列表

  • 這裡沒有順序
  • 這裡也沒有
  • 這裡也是
  • 這裡同樣沒有

神奇的有序列表

  1. 一小
  2. 二小
  3. 三最大！

表格

項目價格數量
蜂蜜$2301
檸檬$2018
感冒藥$1202

有道理的引言

引言有兩種呈現方式，分別是行內： 咖啡因來自咖啡果，所以咖啡果是因，咖啡因是果 ，以及區塊：

“飲水機其實不是飲水機，它是出水機。你才是飲水機，各位飲水機們好。”

超連結

你可以在簡報中加入超連結來導覽至不同頁面，像是 這個。

簡報者檢視畫面

我們有一個 簡報者檢視畫面。 它包括一個計時器，下一張幻燈片的預覽以及你的演講筆記。

按下 S 鍵來試用。

輸出 PDF

簡報可以被 輸出成 PDF， 這是一個範例：

全域狀態

在幻燈片上設置 data-state="something"，當幻燈片開啟時， "something" 將被添加為文檔元素的 class。這讓你可以更自由的應用畫面，如切換頁面背景。

狀態事件

此外，可以通過綁定到 data-state 名稱，在每個幻燈片的基礎上觸發自定義事件。


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

欸等等

在鍵盤上按 B 或 . 鍵來暫停簡報。當你在台上希望聚焦觀眾的注意力時很有用。

更多功能

THE END

- 試試線上編輯器
- 原始碼倉庫

在網頁上創建驚豔的簡報

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 演示平台。