們看一下以編程方式創(chuàng)建幻燈片的兩個框架，Reveal.js和Eagle.js，看看它們是如何疊加的。

我最近使用了幾個JS框架來制作幻燈片和最終的程序化視頻。以下是我對兩個框架 Reveal.js和Eagle.js的反饋。

介紹

正如我之前在Faveeo寫的那樣，我們正在努力從策劃文章中制作原創(chuàng)內(nèi)容。團隊的一個想法是從書面文章中制作視頻，以最大限度地提高讀者的參與度，并生成新鮮，易于理解的材料。

我不得不探索以編程方式制作視頻的解決方案和我想出的一個解決方案，即構(gòu)建有吸引力的幻燈片。幻燈片必須具有足夠的吸引力，以吸引讀者并給他們留下他們正在觀看視頻的印象。

通過團隊，我們探索了幾種解決方案：

• 使用JS生成幻燈片并記錄它們。
• 使用ffmpeg 和以編程方式構(gòu)建視頻 imagemagick。
• 探索可用的SaaS平臺來編寫我們的視頻。
• 生成Adobe Premiere兼容格式。

長話短說，除了第一個解決方案外，所有解決方案都成了噩夢。

我一直在使用兩個框架來構(gòu)建我的幻燈片，我保留了Eagle.js

Reveal.js

Reveal.js是一個很酷的框架，允許用戶使用HTML / CSS和一些JavaScript來構(gòu)建自己的幻燈片。為了幫助初學者，它在https://slides.com/上提供了一個在線編輯器。

這篇文章不是教程，因此，這是我對我的用例的反饋。

好吧，Reveal.js非常受歡迎，很容易在網(wǎng)上找到很多例子。

WTF：我們?nèi)绾伍_始？

我第一次使用Reveal.js時有這種反應，直到我明白我必須克隆一個git項目來創(chuàng)建我的第一個模板。我遇到的第二個問題是找不到代碼，直到我發(fā)現(xiàn)單個HTML頁面包含幻燈片放映的所有代碼。

豐富的功能和出色的文檔

Reveal.js有一系列令人印象深刻的功能，自動播放，錄音，音頻等等，它對大多數(shù)人來說都是完美的。

文檔也很棒，你會發(fā)現(xiàn)很多例子。

解決方案的缺點

Reveal.js有一些缺點：

• 它是純粹的，香草的JS，雖然我能夠使它與Vue.js友好，但它一直非常hacky。
• 當幻燈片出現(xiàn)時，我無法觸發(fā)文本動畫。
• 我必須在生成新幻燈片后重新啟動組件，因為我無法控制Reveal.js生命周期。

設(shè)計缺陷

Reveal.js帶有一個相當聰明的系統(tǒng)，可以正確定位幻燈片項目并計算它們的大小。

但是，如果你想為你的幻燈片制作一個絕對的設(shè)計，那就是一個純粹的噩夢，即底部的元素，左上角的圖片等。

我一直在努力獲得我的第一個視頻原型，其中包含Reveal.js附帶的CSS選項以及我們自定義模板的方式。

Eagle.js

Eagle.js是一個由Vue.js提供支持的最新JS框架，因此允許開發(fā)人員將幻燈片寫為Vue組件。

我一直對這個框架感興趣，因為它允許我的幻燈片與Vue的原生集成以及可能更容易的自動生成。

以下是我對Eagle.js的反饋。

Vue

我一直是Vue.js的大力支持者，并且使用基于它的庫讓事情變得非常簡單。我花了幾個小時將Reveal.js幻燈片移植到Eagle.js。

文檔很差

是的，文檔很差，即使Zulko提供了幾個很好的例子。但是所有邏輯和臟東西都隱藏在代碼中。好消息？只有兩個小代碼文件。

沒有特色

這些組件事實上 是缺少的，但是缺少一大堆功能，例如自動播放。

CSS

框架附帶一個主題，但一切都可以輕松覆蓋。

易于擴展

我擴展了框架，允許我進行一些調(diào)整和設(shè)計選擇（https://github.com/faveeo/eagle.js）。

結(jié)論

我保留了Eagle.js。雖然該框架具有較少的功能和較差的文檔，但我們可以輕松擴展設(shè)計或功能，這使我能夠創(chuàng)建更好的幻燈片和視頻。

網(wǎng)免費下載模板 webslides.tv

懂html的朋友可以信手拈來的好東西，支持電腦和手機版式，而且JS特效已經(jīng)爛了街了，自己稍稍加工就能做的美輪美奐。要是放在網(wǎng)站服務器上，再也不用拿個U盤倒來倒去，隨時隨地瀏覽ppt，相當實用哦。