紅魔電競(jìng)平板評(píng)測(cè)：大屏幕硬實(shí)力
前言：三年的疫情因?yàn)橐暇W(wǎng)課的原因激活了平板市場(chǎng)，如今網(wǎng)課的時(shí)代已經(jīng)過去，大家的生活都恢復(fù)到了正軌，這也就意味著，真正考驗(yàn)平板電腦生存的環(huán)境來了。也就是面對(duì)著這種殘酷的
最近在做產(chǎn)品復(fù)盤和技術(shù)分享,所以需要做個(gè)PPT, 來回顧這半年來的技術(shù)貢獻(xiàn). 但苦于mac上運(yùn)行PPT那感人的流暢度, 成功的激起了我的強(qiáng)迫癥, 所以索性想辦法通過技術(shù)的手段來做個(gè)網(wǎng)頁版PPT, 這個(gè)時(shí)候我發(fā)現(xiàn)了reveal.js: 一個(gè)使用 HTML 語言制作演示文稿的 Web 框架，支持插入多種格式的內(nèi)容，并以類似 PPT 的形式呈現(xiàn). 花了15分鐘系統(tǒng)的調(diào)研了一下, 覺得基本滿足技術(shù)分享類PPT的要求, 所以決定采用該方案來實(shí)現(xiàn)我的網(wǎng)頁版PPT. 這里列一下我用的技術(shù)調(diào)研:
所以我接下來大致按照以上幾個(gè)衡量標(biāo)準(zhǔn), 來帶大家一起感受一下如何快速通過reveal.js實(shí)現(xiàn)一個(gè)極具動(dòng)感的PPT.
首先我先來談?wù)凱PT的不足(非專業(yè)角度, 技術(shù)視角):
所以對(duì)于不熟悉PPT套路的技術(shù)工作者來說, 往往很難快速制作出精美的PPT.
接下來我們?cè)倏纯磖eveal.js的優(yōu)勢(shì).
說了這么多revealjs的優(yōu)點(diǎn),接下來我們就來學(xué)習(xí)如何使用它吧.
作為一名前端工程師, 我們很容易把 reveal.js 集成到我們的vue或者react項(xiàng)目中, 但是作為演講類型的項(xiàng)目,我們直接用最原始的方式實(shí)現(xiàn)即可,首先我們需要引入相關(guān)的文件,具體可參考官網(wǎng)所說的步驟去做: revealjs.com/. 最簡(jiǎn)單的使用方式如下:
<html> <head> <link rel="stylesheet" href="dist/reveal.css"> <link rel="stylesheet" href="dist/theme/white.css"> </head> <body> <div class="reveal"> <div class="slides"> <section>Slide 1</section> <section>Slide 2</section> </div> </div> <script src="dist/reveal.js"></script> <script> Reveal.initialize(); </script> </body></html>復(fù)制代碼這樣通過短短幾行代碼, 我們就能實(shí)現(xiàn)一個(gè)兩頁的PPT.
當(dāng)然我們還能實(shí)現(xiàn)更加自由的演示動(dòng)畫, 父子嵌套結(jié)構(gòu), 專場(chǎng)動(dòng)畫等. 接下來我們介紹幾個(gè)核心API.
父子嵌套主要是一個(gè)PPT主題可能包含很多子主題, 要想實(shí)現(xiàn)父子主題分明的演示文檔, 在reveal.js也很好實(shí)現(xiàn), 只需要在section內(nèi)部再包裹section標(biāo)簽即可. 代碼如下:
<div class="reveal"> <div class="slides"> <section>Slide 1</section> <section> <section> Slide 2-1 </section> <section> Slide 2-2 </section> </section> <section>Slide 3</section> </div></div>復(fù)制代碼效果如下圖所示:
我們都知道技術(shù)類PPT肯定離不開代碼, 我們?cè)趓eveal.js中可以很容易的展示我們的代碼,并且支持多種語言, 其框架底層集成了 業(yè)界比較有名的highlight.js. 使用方式如下:
Markdown是技術(shù)工作者常用的編寫文檔的工具, revealjs同樣也支持使用Markdown的方式來編寫PPT, 是不是很貼切? 具體方式如下:
revealjs支持對(duì)每一頁幻燈片使用自定義背景(包括視頻).我們只需要在section標(biāo)簽中使用data-background即可, 并且支持背景透明. 具體demo如下:
Backgrounnds一共有如下屬性可以使用:
Fragments用來高亮或者漸進(jìn)式的展現(xiàn)元素.每一個(gè)包含fragment類名的元素都被視為漸進(jìn)的元素, 它們會(huì)通過點(diǎn)擊下一步來依次呈現(xiàn)在幻燈片中.
reveal.js提供了很多種不同風(fēng)格的主題, 我們只需要引入不同的css即可. 包括黑色(black), 白色(white), league, beige, 天空(sky), 夜晚(night)等主題.大家可以自行感受一下.
不同幻燈片進(jìn)入頁面的動(dòng)畫方式我們可以使用Transitions來設(shè)定. 以下是提供的幾種默認(rèn)轉(zhuǎn)場(chǎng)動(dòng)畫:
具體demo實(shí)現(xiàn)如下:
<div class="reveal"> <div class="slides"> <section>Slide 1</section> <section> <section data-transition="fade"> Slide 2-1 </section> <section data-transition="convex"> Slide 2-2 </section> <section data-transition="concave"> Slide 2-3 </section> <section data-transition="zoom"> Slide 2-4 </section> </section> <section>Slide 3</section> </div></div>復(fù)制代碼導(dǎo)出PDF作為一個(gè)附加功能也算是比較貼心了,如果想了解使用方式可以參考https://revealjs.com/pdf-export/. 接下來我們就來實(shí)現(xiàn)一個(gè)動(dòng)態(tài)的PPT demo, 供大家學(xué)習(xí)參考.
效果演示請(qǐng)?jiān)L問地址: https://user-gold-cdn.xitu.io/2020/7/13/173473da6ed62d8a?imageslim
代碼如下:
<body> <div class="reveal"> <div class="slides"> <section data-background-image="./img/z1.png" data-background-opacity=".4"> <h1>趣談前端</h1> <p>徐小夕</p> </section> <section> <section data-transition="fade" data-background-color="orange"> <h1>趣談前端 Javascript</h1> </section> <section data-transition="convex" data-background-color="green"> <h1>趣談前端 Vue</h1> </section> <section data-transition="concave" data-background-color="#61dafb"> <h1>趣談前端 React</h1> </section> <section data-transition="zoom" data-background-color="#b32535"> <h1>趣談前端 Angular</h1> </section> </section> <section> <h1>NodeJS</h1> <pre><code data-trim data-noescape> const fs = require('fs') const Koa = require('koa') const app = new Koa() </code></pre> </section> <section> <h3>設(shè)計(jì)模式</h3> <p class="fragment">觀察者模式</p> <p class="fragment">工廠模式</p> <p class="fragment">迭代器模式</p> </section> <section> <h4>數(shù)據(jù)結(jié)構(gòu)與算法</h4> </section> </div> </div> <script src="dist/reveal.js"></script> <script src="plugin/notes/notes.js"></script> <script src="plugin/markdown/markdown.js"></script> <script src="plugin/highlight/highlight.js"></script> <script> // More info about initialization & config: // - https://revealjs.com/initialization/ // - https://revealjs.com/config/ Reveal.initialize({ hash: true, // Learn about plugins: https://revealjs.com/plugins/ plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ] }); </script></body>復(fù)制代碼本文鏈接：http://www.www897cc.com/showinfo-26-76547-0.html分享一款基于Web的PPT制作框架——Reveal.js
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)