Revealjs網頁版PPT讓你複製貼上另類裝逼,簡潔優雅又低調,不懂程式設計也看過來
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