Revealjs網頁版PPT讓你複製貼上另類裝逼，簡潔優雅又低調，不懂程式設計也看過來
阿新 • • 發佈：2020-01-06
Revealjs網頁版PPT讓你複製貼上另類裝逼，簡潔優雅又低調，不懂程式設計也看過來
要了解一個新知識我們可以從三個方面入手：是什麼，有什麼用，怎麼用。下面我們就從這三個方面進行講解Reveal.js噢
Reveal.js是什麼
它是一個專門用來做 HTML 簡報的框架，通俗的講它是網頁版的ppt，使用瀏覽器進行播放。
Reveal.js有什麼用
使用它可以用網頁做出酷炫的展示內容，不會程式設計看完後也可以做出炫酷效果哦。。。
優勢如下：
1.它提供了一套ppt的效果展示，我們只需要關注內容的編寫
2.有瀏覽器就可以展示，不用依賴ppt軟體(推薦使用比較新的瀏覽器哦)
3.編寫簡單，可以直接用程式碼編寫特效，不會程式碼的直接複製貼上又是一張新的ppt頁面了
。。。。。。
Reveal.js怎麼用
下面就來到了本章的重點，所謂我看都沒看到效果，你就pa一大堆看不懂的給我，我只想說“真系摞命”，pa頁面關閉。
那麼為讓大家先體驗一下，下面就給大家來個demo初體驗試試
demo初體驗
(將下面程式碼複製貼上到本地文字檔案，字尾改為html用瀏覽器開啟即可執行)
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Reveal.js教程</title>
<link
href="https://cdn.bootcss.com/reveal.js/3.8.0/css/reveal.min.css"
rel="stylesheet"
/>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/reveal.js/3.8.0/lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- 內容 start -->
<!-- 頁 -->
<section>
<h1>
第一頁
</h1>
<p>這是第一頁的內容，按鍵盤的 右箭頭(→) 可以切換第二頁</p>
</section>
<!-- 頁 -->
<section>
<h1>
第二頁
</h1>
<p>這是第二頁的內容，按鍵盤的 左箭頭(←) 可以切換第一頁</p>
</section>
<!-- 內容 end -->
</div>
</div>
<script src="https://cdn.bootcss.com/reveal.js/3.8.0/js/reveal.js"></script>
<script>
Reveal.initialize({
controls: true,
progress: true,
center: true,
transition: "zoom" // none/fade/slide/convex/concave/zoom
});
</script>
</body>
</html>
試了上面的demo是不是很簡單呢，下面我們就正式進入Reveal.js的學習啦
首先我們可以從下面的途徑獲取到Reveal.js的框架
1.github：從 https://github.com/hakimel/reveal.js/releases 下載 reveal.js 的最新版本
2.從bootcdn直接引用：https://www.bootcdn.cn/reveal.js/
3.用npm 下載 安裝 (這個方法對於初學者比較麻煩在這裡就不講了)
github下載
直接點選上面的連線，跳轉網站後，向下滾動，直到看到有2個壓縮的檔案，點選即可下載。
下載後的目錄結構如下圖，；裡面有index.html和demo.html檔案，這是該框架的基本效果，看得懂的可以研究下。
從bootcdn直接引用
玩過程式設計的應該都知道網上現在有很多靜態資源庫，直接引用即可，不用下載到本地，只要有網路，將做的檔案發給任何人都可以直接開啟檢視，無需再關注所引用的檔案是否路徑正確，本教程也是使用該方法引入的所需外掛。
引入開發所需的外掛，並加以必要註釋
上面的demo只是引入了基本的兩個外掛，而我們實際使用中還需要更多的外掛幫助我們實現效果，具體需要引入的外掛看下面程式碼
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Reveal.js教程</title>
<!-- 初始化樣式 -->
<link
href="https://cdn.bootcss.com/reveal.js/3.8.0/css/reset.min.css"
rel="stylesheet"
/>
<!-- Reveal.js主要樣式，必須 -->
<link
href="https://cdn.bootcss.com/reveal.js/3.8.0/css/reveal.min.css"
rel="stylesheet"
/>
<!-- 黑色主題樣式：最明顯背景黑了 -->
<link
href="https://cdn.bootcss.com/reveal.js/3.7.0/css/theme/black.min.css"
rel="stylesheet"
/>
<!-- 如果要展示程式碼高亮效果，引入這個樣式 -->
<link
href="https://cdn.bootcss.com/reveal.js/3.8.0/lib/css/monokai.min.css"
rel="stylesheet"
/>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/reveal.js/3.8.0/lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- 每張 ppt頁面 必須寫在<div class="reveal"><div class="slides">這裡寫頁面 </div></div> 裡面 -->
<div class="reveal">
<div class="slides">
<!-- 內容 start -->
<!-- 頁 -->
<section>
<h1>
第一頁
</h1>
<p>這是第一頁的內容，按鍵盤的 右箭頭(→) 可以切換第二頁</p>
</section>
<!-- 頁 -->
<section>
<h1>
第二頁
</h1>
<p>這是第二頁的內容，按鍵盤的 左箭頭(←) 可以切換第一頁</p>
</section>
<!-- 內容 end -->
</div>
</div>
<!-- Reveal.js主要js效果，必須 -->
<script src="https://cdn.bootcss.com/reveal.js/3.8.0/js/reveal.js"></script>
<script>
// Reveal.initialize({}) 初始化外掛，裡面每個鍵值對後面要加英文逗號(,)分隔
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
slideNumber: "c/t", //右下角顯示頁數
// 頁面間的切換效果，在這裡設定全域性的切換效果；
// 如果要單獨更改一個頁面的切換效果，可以在該頁面的 <section> 標籤新增(data-transition="值")屬性，值可以選擇下面切換效果的引數
// 如：<section data-transition="zoom">
transition: "convex", // 頁面間的切換效果：none/fade/slide/convex/concave/zoom
dependencies: [
{
src:
"https://cdn.bootcss.com/reveal.js/3.8.0/plugin/markdown/marked.js",
condition: function() {
return !!document.querySelector("[data-markdown]");
}
},
{
src:
"https://cdn.bootcss.com/reveal.js/3.8.0/plugin/markdown/markdown.min.js",
condition: function() {
return !!document.querySelector("[data-markdown]");
}
},
{
src:
"https://cdn.bootcss.com/reveal.js/3.8.0/plugin/highlight/highlight.min.js",
async: true
},
{
src:
"https://cdn.bootcss.com/reveal.js/3.8.0/plugin/search/search.min.js",
async: true
},
{
src:
"https://cdn.bootcss.com/reveal.js/3.8.0/plugin/zoom-js/zoom.min.js",
async: true
},
{
src:
"https://cdn.bootcss.com/reveal.js/3.8.0/plugin/notes/notes.min.js",
async: true
}
]
});
</script>
</body>
</html>
Reveal.js還為我們提供了多個主題可供選擇，具體可以看下圖
準備工作已就緒，下面讓我們來正式開始特效學習
下面的程式碼都需要複製替換到“ 引入開發所需的外掛” 程式碼中所寫的<div class="slides"> 程式碼區 </div> 標籤中
頁面的上下切換(垂直方式顯示)：需要 <section> 標籤裡面巢狀多個 <section> 標籤
<!-- 內容 start -->
<!-- 頁 -->
<section>
<!-- section中的section -->
<section>
<h1>
第一頁第一節
</h1>
<p>按鍵盤的 下箭頭(↓) 可以切換 第一頁第二節</p>
</section>
<!-- 節與節的section平級 -->
<section>
<h1>
第一頁第二節
</h1>
<p>按鍵盤的 上箭頭(↑) 可以切換 第一頁第一節</p>
</section>
</section>
<!-- 內容 end -->
頁面的左右切換(水平方式顯示):需要 <section> 標籤平級不巢狀
<!-- 內容 start -->
<!-- 頁 -->
<section>
<h1>
第一頁
</h1>
<p>這是第一頁的內容，按鍵盤的 右箭頭(→) 可以切換第二頁</p>
</section>
<!-- 頁 -->
<section>
<h1>
第二頁
</h1>
<p>這是第二頁的內容，按鍵盤的 左箭頭(←) 可以切換第一頁</p>
</section>
<!-- 內容 end -->
常用於展示的標籤
-
h1~h6 標題標籤，文字會加粗
-
p 標籤：文字正常顯示
-
img 標籤：這個標籤可以載入圖片
-
audio 標籤：可以載入音樂播放
-
video 標籤：可以載入視訊播放
<!-- 內容 start --> <!-- 頁 --> <section > <h1> 第一頁,這是 h1 標籤</h1> <h2>這是 h2 標籤</h2> <h6>這是 h6 標籤</h6> <p>這是 p 標籤，按鍵盤的 右箭頭(→) 可以切換第二頁</p> <img src="./背景.jpg" alt="這是圖片標籤，圖片不能顯示所以裂了"> </section> <!-- 頁 --> <section > <h1>第二頁</h1> <p>這是第二頁的內容，按鍵盤的 左箭頭(←) 可以切換第一頁</p> <audio src="./你的答案.mp3" controls>載入音樂</audio> <video src="./阿冗 - 你的答案.mkv" controls>載入視訊</video> </section> <!-- 內容 end -->
展示的效果
所用資源的目錄結構
單獨給頁面新增過渡效果
下面是讓 第二頁 在過渡到 第三張 時有 放大 的過渡效果，第一頁 過渡到 第二頁 不設定，採用的是全域性設定的過渡效果
過渡效果預設值有：none/fade/slide/convex/concave/zoom
過渡效果預設值：none不用切換效果/fade漸隱/slide平移出螢幕/convex立體向後隱藏/concave立體向前隱藏/zoom放大
<!-- 內容 start --> <!-- 頁 --> <section > <h1>第一頁</h1> <h3>到第二頁是全域性設定的預設過渡效果</h3> <p>按鍵盤的 右箭頭(→) 可以切換第二頁</p> </section> <!-- 頁 --> <!-- 頁面間的切換效果：none/fade/slide/convex/concave/zoom --> <section data-transition="zoom"> <h1>第二頁</h1> <p>按鍵盤的 左箭頭(←) 可以切換第二頁</p> <h2>到第三頁有 放大 的過渡效果</h2> <p>按鍵盤的 右箭頭(→) 可以切換第三頁</p> </section> <!-- 頁 --> <section> <h1>第三頁</h1> <p>按鍵盤的 左箭頭(←) 可以切換第二頁</p> </section> <!-- 內容 end -->
設定頁面背景
可以設定頁面背景的顏色/圖片/視訊/過渡效果
data-background-video="./阿冗 - 你的答案.mkv" ：設定頁面視訊
data-background="red" ： 設定頁面背景顏色，值可以是16進位制顏色，也可以是英文顏色
data-background-transition="zoom" ：設定頁面背景過渡效果，這個只是背景的過渡，文字還是會用全域性的過渡效果的
注意：如果不用它的自定義屬性設定背景顏色，而是 自己用樣式設定背景顏色(如第三頁效果)，那麼背景顏色是不會全屏顯示的，只會在文字撐開的盒子裡顯示
<!-- 內容 start --> <!-- 頁 --> <section data-background-video="./阿冗 - 你的答案.mkv"> <h1>第一頁</h1> <h3>設定了頁面的 視訊</h3> <p>按鍵盤的 右箭頭(→) 可以切換第二頁</p> </section> <!-- 頁 --> <!-- 頁面間的切換效果：none/fade/slide/convex/concave/zoom --> <section data-background="red" data-background-transition="zoom" > <h1>第二頁</h1> <h3>設定了頁面的 背景顏色和背景過渡效果</h3> <p>按鍵盤的 左箭頭(←) 可以切換第一頁</p> <p>按鍵盤的 右箭頭(→) 可以切換第三頁</p> </section> <!-- 頁 --> <!-- 自定義的背景樣式 style="" --> <section style=""> <h1>第三頁</h1> <p>按鍵盤的 左箭頭(←) 可以切換第二頁</p> </section> <!-- 內容 end -->
文字相關設定
文字片段：一段一段出現的效果，給需要的標籤新增 class="fragment" 屬性
片段出現的動畫：必須要有片段效果，然後新增 fade 的類，fade-* 跟方位名稱，控制出現的動畫方向
動畫出現的順序：必須要有片段效果 ， 然後新增屬性 data-fragment-index="3" ，其中 3 為出現的順序值
文字高亮顯示：新增 highlight-blue 類，blue可以更改為red/green；
注：也可以自定義文字顏色，在標籤中加如下程式碼即可 ： style="color: pink;"
<!-- 內容 start --> <!-- 頁 --> <section> <h1>第一頁</h1> <p>按鍵盤 下箭頭(↓) 或 右箭頭(→) 顯示本頁隱藏的文字</p> <!-- fragment：單獨這個樣式，文字會漸漸出現，這是文字片段效果 --> <p class="fragment">這是隱藏的文字，漸漸出現，還有隱藏</p> <!-- fade-down：從上到下，fade-up：從下到上，fade-left：從右到左，fade-right：從左到右 --> <p class="fragment fade-up">這是隱藏的文字，會從下到上出現</p> </section> <!-- 頁 --> <section > <h1>第二頁</h1> <!-- fade-in-then-out : 第一次按鍵盤會出現，第二次按鍵盤又隱藏了，並且進行下一個效果 --> <p class="fragment fade-in-then-out">出現後，再按鍵盤 下箭頭(↓) 就隱藏，並且進行下一個效果</p> <!-- fade-in-then-semi-out ： 第一次出現，再按鍵盤顏色就變淺 --> <p class="fragment fade-in-then-semi-out">出現後，再按鍵盤 下箭頭(↓) 就顏色變淺</p> <!-- highlight-blue ： 高亮變藍色，blue可以換成red，green --> <p class="fragment highlight-blue">按鍵盤的 下箭頭(↓) 下面字型的顏色高亮邊藍色</p> <p class="fragment highlight-green">按鍵盤的 左箭頭(←) 可以切換第二頁</p> <p>按鍵盤的 右箭頭(→) 可以切換第三頁</p> </section> <!-- 頁 --> <section > <h1>第三頁</h1> <!-- data-fragment-index="10" : 設定片段出現的順序 --> <p >按鍵盤 下箭頭(↓) 或 右箭頭(→) 顯示本頁隱藏的文字</p> <p class="fragment" data-fragment-index="3" >排第一，第三順序出現</p> <p class="fragment" data-fragment-index="1" >排第二，第一順序出現</p> <p class="fragment" data-fragment-index="2" >排第三，第二順序出現</p> <!-- style="color: pink;" ： 自定義設定文字顏色 --> <p style="color: pink;" >按鍵盤的 左箭頭(←) 可以切換第二頁</p> </section> <!-- 內容 end -->
直接使用Markdown語法
要給需要的頁面的 <section> 標籤新增 data-markdown 屬性，並且裡面寫 script 標籤
注：
-
可以使用 Typora軟體寫好 Markdown的文件，再將其複製到該需要的頁面中，這樣就不會出現語法錯誤
-
也可以直接引入外部的markdown檔案
<!-- 內容 start -->
<!-- 頁 -->
<section data-markdown>
<script type="text/template">
# 這是h1標籤
- 無序列表1
- 無序列表2
```html
<p>
這是 p 標籤的程式碼段
</p>
```
</script>
</section>
<!-- 內容 end -->
附：快捷鍵
上下左右鍵 ： 頁面間的切換
F鍵 ：全屏 (按下 ESC鍵 退出全屏)
f11鍵 ：全屏 (這個全屏需要再次按下 f11 才可以退出全屏)
o鍵 ：預覽所有頁面 (這時按 上下左右鍵 可以切換當前的選中頁面 ，再次按 o鍵 顯示當前選中的頁面)
到此基本的操作已經講完了，可以適用大部分ppt演示的需求，更加深入的如需要，可以自行到官網中研究即可
現附加完整效果的程式碼
<!-- 內容 start -->
<!-- 頁 -->
<section>
<!-- section中的section -->
<section>
<h1>
第一頁第一節
</h1>
<p>按鍵盤的 下箭頭(↓) 可以切換 第一頁第二節</p>
</section>
<!-- 節與節的section平級 -->
<section data-transition="zoom">
<h1>
第一頁第二節
</h1>
<p>按鍵盤的 上箭頭(↑) 可以切換 第一頁第一節</p>
</section>
</section>
<!-- 頁 -->
<section data-background="red" data-background-transition="zoom">
<h1>第一頁,這是 h1 標籤</h1>
<h2 class="fragment fade-in-then-out">這是 h2 標籤</h2>
<h6 class="fragment fade-in-then-semi-out">這是 h6 標籤</h6>
<p>這是 p 標籤，按鍵盤的 右箭頭(→) 可以切換第二頁</p>
<img src="./背景.jpg" alt="這是圖片標籤，圖片不能顯示所以裂了" />
</section>
<!-- 頁 -->
<section>
<h1 class="fragment highlight-blue">第二頁</h1>
<p>這是第二頁的內容，按鍵盤的 左箭頭(←) 可以切換第一頁</p>
<audio src="./你的答案.mp3" controls>載入音樂</audio>
<video src="./阿冗 - 你的答案.mkv" controls>載入視訊</video>
</section>
<!-- 頁 -->
<section>
<h1>第三頁</h1>
<!-- data-fragment-index="10" : 設定片段出現的順序 -->
<p>按鍵盤 下箭頭(↓) 或 右箭頭(→) 顯示本頁隱藏的文字</p>
<p class="fragment" data-fragment-index="3">排第一，第三順序出現</p>
<p class="fragment" data-fragment-index="1">排第二，第一順序出現</p>
<p class="fragment" data-fragment-index="2">排第三，第二順序出現</p>
<!-- style="color: pink;" ： 自定義設定文字顏色 -->
<p style="color: pink;">按鍵盤的 左箭頭(←) 可以切換第二頁</p>
</section>
<!-- 頁 -->
<section data-markdown>
<script type="text/template">
# 這是h1標籤
- 無序列表1
- 無序列表2
```html
<p>
這是 p 標籤的程式碼段
</p>
```
</script>
</section>
<!-- 內容 end -->
&n