首页 > 酷炫的web投影片:impress/jmpress.js與reveal.js

投影片頁碼,酷炫的web投影片:impress/jmpress.js與reveal.js

互联网 2021-05-12 14:16:34
酷炫的web投影片:impress/jmpress.js與reveal.jsJS, cool, impress.js, jQuery, jmpress.js, prezi, reveal.js, web slide

一年多前,咱們team用了一個flash-base的簡報工具--Prezi,向老闆報告某雲端應用的讀書會sharing。那是個多麼美好的時光,也是多麼糟糕的時光阿(遠目)

Prezi的概念就是:畫布是無限大的,你可以定義每個頁面的框在畫布的哪個位置、大小;播放時候會以zoom-in/out的形式,可以帶給觀眾在單一個主題上overview與微觀的整體層次感。當初令我印象最深刻的就是某個prezi實習生做的Sweet recipe to solving problems(真的是Epic!)。如今Prezi的知名度應該已經有相當程度的提升,也讓我跌破眼鏡的開始支援了iPad(應該是開發了flash轉CSS3?我沒iPad所以不確定)。如果還沒體驗過的話,可以直接去Prezi 上逛逛別人做好的,個個都是熱情奔放、創意無限!

Prezi的播放介面最近,手上又有個關於jQuery的sharing topic。剛好在開始準備的前幾天,我看到了讓我眼睛一亮的玩意--impress.js、jmpress.js和reveal.js。因為剛好需要對jQuery的功能做live demo,如果能在slide上面就直接辦到,這是多麼美妙的一件事啊!當然是先用再說囉。

它們都是以CSS3+JS為主的技術來實現web投影片播放:impress.js簡單的說就是100%向prezi致敬(官網承認的),將整個無限畫布的概念抄承襲了下來;jmpress.js則是繼續抄承襲了impress.js, 加入了jQuery/jQuery UI,強調他不只可以當作投影片,更可以拿來當成網站用;reveal.js則是比較不玩這麼fancy的東西,只提供3種轉場效果&程式碼自動上色,整體播放下來的體驗會比較像PowerPoint或Keynote。比較炫的就是除了←→換頁外,還可以使用↑↓方向鍵來進入一張投影片的「地下室」(這樣講有點抽象,直接去玩玩看就知道啦XD)

於是,我當然是挑了比較酷炫的impress.js來試試看(為什麼要demo jQuery卻不用jmpress.js呢?因為我做完才發現有它的存在orz)。

最後,來個小小的比較(個人意見):

Preziimpress.js/jmpress.jsreveal.js 使用技術FlashCSS3 + JS 簡報特性以zoom-in/out的形式,帶給觀眾整體感提供較多如PowerPoint簡報特性的功能,並提供「地下室」 操作性可隨時使用滑鼠滾輪自由放大縮小;可自由拖移畫布位置無法使用滾輪、拖移四向方向鍵的創新模式 跳頁方便性(跳到很遠的投影片)須用滾輪縮小後,點選該投影片方可跳至該頁在URL上的#號(hash)後面會顯示該頁面ID。可以直接在網址列上修改ID跳至想要的頁面,也可以自己加上其他投影片的連結;可以用瀏覽器的上一頁/下一頁/瀏覽歷程等操作可在頁面上自己加連結,但是一般跳頁時不會更新hash,所以重新整理之後投影片會跑掉,也不能用上一頁/下一頁 製作難度提供功能相當完整的設計介面,可方便地編輯整個大畫布。他主打的「斑馬環」(移動/旋轉/放大縮小工具,就是prezi的logo那個圓形怪怪的東西)也是此介面的一大特色需有HTML基礎方能看懂其原理。目前入門的門檻相對高很多。(如:一個為一張投影片)(4/18更新:已經有人製作impress線上編輯工具) 擴充性被內建的主題限制而無法自訂字型顏色等基本屬性。但可以自行匯入flash(swf)、PDF、圖片等資源(上面提到的recipe範例就是插入了一個龐大的flash)只要是在網頁上可以插入的東西都可以加進來! (要多有彈性就多有彈性,但是相對的就沒有一個良好的擴充架構)社群/網路資源相當豐富無社群 (github算嗎XD)相容性Flash不相容於iOS。雖然有推出iPad版本,但所插入的flash、PDF等元件應該凶多吉少HTML+CSS+JS是未來的web標準技術。唯對舊版瀏覽器相容性仍較差 3D特效目前無提供可以指定傾角、xyz軸位置等,做出很酷炫的3D效果轉場時有3D特效 收費freemium模式免費免費

現在CSS跟JS的技術都有爆炸性的成長,其實還有很多更酷炫的方式來呈現簡報(如parallax scrolling的:layrr、Nike AJ球鞋網頁等等)。但是真的就流於網頁程式設計苦工了,需要評估有沒有值那個成本。

喜歡嗎?去fork一個你的Limpress.js吧XD! (趕風潮XD)

延伸閱讀用impress.js製作產品展示網站 - tutorialzine(大推此站)(2012/04/05更新)使用jmpress.js製作商品展示網站 - codrops(2012/04/18更新)Impressionist – Impress.js的線上編輯工具(目前版本Alpha3)

Posted by df1Mar 25th, 2012

Tweet

« Be a Rockstar Developer 當個搖滾開發人員Web-based Slideshows --Comparing impress.js, jmpress.js and reveal.js »

免责声明:非本网注明原创的信息,皆为程序自动获取自互联网,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责;如此页面有侵犯到您的权益,请给站长发送邮件,并提供相关证明(版权证明、身份证正反面、侵权链接),站长将在收到邮件24小时内删除。

相关阅读