一、我為什么要研究reveal.js

公司會在月末我們這些新人準備一個月學習結果總結會，需要通過PPT來展示自己一個月來的學習成果。

之前參加過一次前端技術分享，記得有一個大牛在講NPM的時候就用了一種類PPT效果的前端技術，后來又在看一個大牛的博客的時候，也看到了相同的類PPT效果的前端技術。

我就在想，這些是他們自己寫出來的嗎？好牛X啊，我也想研究研究自己寫一個。翻到大牛的博客的github地址的時候，發(fā)現(xiàn)他Thanks了一個REVEAL.JS，我很奇怪，他沒事thank這個干什么，于是隨手一點，這一點不要緊，一下發(fā)現(xiàn)了黑科技！

金手指

二、什么是reveal.js

reveal在英文中有很多意思，動詞方面有揭露，啟示，名詞方面則是展現(xiàn)，我覺得啟示就很不錯，因為PPT就是通過分享自己的東西，來最終達到一個啟示別人的效果。

就叫啟示有點光禿禿的感覺，那么我們叫它“啟示雞”好了，大牛們都有屬于自己的神雞，感覺前端技術圈就是一個斗雞的地方哈，前端技術圈可以叫雞場了。

今天我們來認真研究一下這只啟示雞！

啟示雞：HTML演講框架

啟示雞能夠幫助你通過使用HTML創(chuàng)造出漂亮的交互式滑動板塊。這個報告將為你展示啟示雞能做出的效果

三、如何使用reveal.js

不是碼農(nóng)？這不是問題。在slides.com有一套完整版的可視化編輯器。

這是slide.com編輯界面，需要注冊一個賬號，我暫時用的是免費版，想要更多功能可以嘗試選擇3種套餐中的一種

四、reveal.js各種黑科技功能詳細介紹

① 垂直滑動

垂直滑動：滑動可以彼此嵌套?？崭矜I是進行下一次滑動的快捷鍵。

第一級：嵌套滑動用來為高級別滑動添加更加詳細的信息。

第二級：點擊向上箭頭返回第一級。

② 視圖部分

視圖部分：按ESC鍵后顯示縮略圖。長按alt鍵后，再單擊當前頁面時進行可以放大。

這是我按了ESC之后的縮略圖效果，可以很清晰地看到當前PPT的視圖結構

長按alt再單擊click，當前頁面放大

③ 支持觸摸屏操控

可觸摸控制：報告在移動可觸摸設備上顯示良好?？梢栽诎鍓K間任意滑動。

④ 支持markdown文本編輯器

支持markdown文本編輯器。更多信息可以查閱reveal-js的github地址里的readme

⑤ 碎片化顯示內(nèi)容

碎片化，逐條顯示內(nèi)容

點擊下箭頭時

1

2

3

碎片化樣式：可以添加一些動畫之類的東西

⑥ 過渡樣式

過度樣式：你可以選擇不同的過度效果

這是應用Convex時的一個截圖，個人最喜歡這個

⑦ 主題

其實就是對背景色和字體顏色做了一下修改

這是Serif主題的效果

⑧滑塊背景（強大到令人發(fā)指）

為data-background屬性設置就可以改變按鍵顏色

data-background同樣也可以傳入圖片作為背景

也可以設置repeat和size

竟然可以傳入視頻作為背景

Gif也可以！

⑨背景過渡

通過下面這條語句可以設置背景的過渡效果

背景過渡可以無視每個滑塊的過渡效果，比如我們現(xiàn)在的Convex

⑩漂亮的代碼

代碼語法高亮顯示

?不可思議的課表？神奇的有序列表？扁平的表格？很普通啊...

不可思議的課表

神奇的有序列表

扁平的表格

?聰明的引用

?星際穿越

板塊間而已跳轉

這是點擊like this 后的結果

?演講者視圖

不明覺厲，點進去看了一下

沒看懂...

但是，按了S鍵后：

?這些板塊可以被以PDF的形式輸出

?全局聲明

意思貌似是我們在一個slide添加語句，會時時更新整個文件。

?聲明事件

?休息一下

按下B鍵后，會變成這樣：

?其他

右到左的支持，擴展API，自動發(fā)展，視差背景，快捷鍵。

?結束

參考Reveal.JS官方介紹鏈接：lab.hakim.se/reveal-js/#/（貌似需要翻墻）

我已經(jīng)迫不及待得想去試試slide.com的編輯器了，這也太好玩了吧！

努力成為優(yōu)秀的前端工程師！

突然發(fā)現(xiàn)用reveal.js也可以做畢設答辯報告！

>期待和大家交流，共同進步，歡迎大家加入我創(chuàng)建的與前端開發(fā)密切相關的技術討論小組：

> - SegmentFault技術圈:[ES新規(guī)范語法糖](https://segmentfault.com/g/1570000010695363)

> - SegmentFault專欄：[趁你還年輕，做個優(yōu)秀的前端工程師](https://segmentfault.com/blog/chennihainianqing)

>- 知乎專欄：[趁你還年輕，做個優(yōu)秀的前端工程師](https://zhuanlan.zhihu.com/wyasy)

>- Github博客: [趁你還年輕233的個人博客](https://github.com/FrankKai/FrankKai.github.io)

>- 前端開發(fā)QQ群：660634678

>- 微信公眾號： 人獸鬼 / excellent_developers


>努力成為優(yōu)秀前端工程師！