還在用M$ Powerpoint经宏?太out了桥状,當(dāng)然是個(gè)人都知道ppt有多out,可別以為Keynote戏罢,或者Prezi就不out了屋谭。下面列舉的的工具大多在效果上不弱于這些收費(fèi)軟件,可別以為這不過(guò)是程序猿的游戲龟糕,起碼我就不是程序猿桐磁,呵呵。相比M$家的產(chǎn)品讲岁,以基于html5的方式來(lái)制作幻燈片我擂,由于基于瀏覽器可以實(shí)現(xiàn)跨平臺(tái)使用,根本不用擔(dān)心做好的ppt用Mac機(jī)上用keynote效果不一樣缓艳,或者做好了pptx校摩,結(jié)果面對(duì)一臺(tái)只能打開(kāi)ppt的機(jī)器。當(dāng)然更重要的是它們大多數(shù)免費(fèi)的阶淘,當(dāng)然對(duì)于壕或者不介意長(zhǎng)期使用盜版M$產(chǎn)品的就當(dāng)我白說(shuō)了秧耗。就我個(gè)人感受而言,我比較偏愛(ài)兩類(lèi)幻燈工具舶治,一類(lèi)是支持markdown分井,這些可以很方便地把平時(shí)的筆記輕松整合到幻燈片里车猬。另一類(lèi)是類(lèi)似prezi/impress.js這種采用非線性方式的,這大概主要因?yàn)槲易约鹤龌脽魰r(shí)思路太跳躍了吧尺锚。
Reveal.js
![](http://cdn.impressivewebs.com/2012-03/revealjs.jpg)
目前用得最多的展示工具珠闰,主要并不在于效果夠炫(當(dāng)然3D轉(zhuǎn)場(chǎng)也算得上炫),而在于支持markdown瘫辩,非常方便將平時(shí)用markdown作的筆記伏嗜,借用pandoc迅速轉(zhuǎn)成展示用的幻燈片。它的特點(diǎn)在于可以水平和垂直兩個(gè)方向進(jìn)行幻燈片的切換伐厌。每張幻燈片是以section
標(biāo)簽區(qū)分承绸,最終生成一張html文件,文件放在reveal.js文件夾就可以出現(xiàn)效果挣轨,就算沒(méi)有reveal.js军熏,html文件也易于閱讀。
如果懶得折騰卷扮,也有 在線編輯器
![](http://www.mayflymedia.co.uk/media/30444/slid.es_548x275.jpg)
如果喜歡折騰荡澎,當(dāng)然可以通過(guò)更改ccs,獲得更多不同效果晤锹。
Impress.js
![](http://www.xhtmljunkies.com/wp-content/uploads/2014/02/impress.jpg)
如果說(shuō)reveal.js的效果是炫摩幔,那么impress.js的效果是炫爆了。impress.js受到prezi的深刻影響鞭铆,其實(shí)很難用文字形容它能呈現(xiàn)的3D效果或衡,打開(kāi)看看就知道了。
它使用div
標(biāo)簽來(lái)區(qū)分每個(gè)頁(yè)面车遂,頁(yè)面可以在x,y,z三個(gè)軸上位移與旋轉(zhuǎn)封断。
如果不想折騰,也有在線編輯器strut
![](http://www.boxyapp.com/wp-content/uploads/2013/01/strut-690x500.jpg)
Jimpress.js
jQuery版的impress.js
Google Slides Template
![](http://zoomzum.com/wp-content/uploads/2012/02/Screen-shot-2012-02-27-at-8.31.24-PM-e1330355220157.png)
沒(méi)錯(cuò),Google也有它的html5幻燈模板,當(dāng)然沒(méi)有reveal.js,impress.js的話配紫,它也算不錯(cuò)了碉就,只是它只能由右向左滑動(dòng)。
頁(yè)面用article
區(qū)別废岂,也可以用css自定義風(fēng)格祖搓。
Deck.js
![](http://www.webresourcesdepot.com/wp-content/uploads/deck-js.jpg)
最早的html5幻燈片工具,功能和google slides template差不多湖苞,沒(méi)有什么轉(zhuǎn)場(chǎng)效果拯欧。
Shower
![](http://bashooka.com/wp-content/uploads/2012/11/shower-6.jpg)
Shower是Opera的Vadim Makeev開(kāi)發(fā)的,雖然效果比不上最炫的那幾位财骨,不過(guò)對(duì)不同的瀏覽器支持很好镐作,可以點(diǎn)Esc
開(kāi)啟幻燈片縮略圖藏姐。
Slippy
![](http://maxcdn.webappers.com/img/2010/06/slide-jquery.jpg)
支持多種瀏覽器,無(wú)轉(zhuǎn)場(chǎng)特效该贾。
CSSS
![](http://lea.verou.me/wp-content/uploads/2010/10/csss-logo.jpg)
基于css的幻燈工具
io-2012-slides
就是原來(lái)的html5slides羔杨,不要被那個(gè)2012迷惑了,那是說(shuō)從2012年開(kāi)始開(kāi)發(fā)杨蛋,不是說(shuō)最新的版本是2012年開(kāi)發(fā)的兜材。支持markdown.
Fathom.js
![](http://jquer.in/wp-content/uploads/2012/12/Fathom-js.png)
既可以使用鼠標(biāo)也可以使用鍵盤(pán)操作。
html5rocks
![](http://www.html5rocks.com/static/images/html5rocks-logo-wings.png)
dzslides
![](http://i1-news.softpedia-static.com/images/news-700/Script-of-the-Day-DZSlides.png?1344065216)
單頁(yè)模板逞力,可以放入文本曙寡、圖片、視頻寇荧、iframes,也適合移動(dòng)終端举庶。
Flow.js
![](http://i1-scripts.softpedia-static.com/screenshots/Flowtime-js_1.png?1358522641)
由css3管理動(dòng)畫(huà),Javascript負(fù)責(zé)導(dǎo)航與高級(jí)功能砚亭。
![](http://b.webutation.net/e/b/slidecaptain.com.jpg)
S5
![](http://www.linux-magazine.com/var/linux_magazin/storage/images/media/linux-magazine-eng-us/images/s5dokuwikiplugin.png/395959-1-eng-US/S5DokuWikiPlugin.png_reference.png)
Scrolldeck.js
![](http://cdn.tripwiremagazine.com/wp-content/uploads/2012/07/scrolldeck.js3_thumb.jpg)
Slides
![](http://zoomzum.com/wp-content/uploads/2012/02/Screen-shot-2012-02-27-at-8.47.47-PM-e1330356070992.png)
Landslide
![](http://adamzap.com/random/landslide.png)
支持makrdown與reStructuredText
Pow
![](http://farm8.staticflickr.com/7426/9781828774_eea6203034_o.jpg)
Stack
![](http://farm6.staticflickr.com/5456/9781367862_e7c727012a_o.jpg)
轉(zhuǎn)場(chǎng)采取的垂直下拉的方式
Bespoke.js
![](http://www.webresourcesdepot.com/wp-content/uploads/bespoke_js.gif)
Micro-Framework演示工具
Scriptless
![](http://www.egrappler.com/wp-content/uploads/2013/12/Scriptless-slidess.jpg)
Html Slidy
![](http://www.egrappler.com/wp-content/uploads/2013/12/Slide-Shows-in-HTML-and-XHTML-HTML-Slidy.jpg)
用于創(chuàng)建 html和Xhtml格式的幻燈灯变。
Slidedown
從markdown生成語(yǔ)法高亮的幻燈。
Perkele.js
![](http://www.egrappler.com/wp-content/uploads/2013/12/JavaScript-Slide-Framework-Perkele.js.jpg)
JavaScript幻燈框架
HoverForMore.js
可以以跑馬燈形式上下或左右滾動(dòng)顯示捅膘,需jQuery或Zepto,對(duì)不同瀏覽器支持良好添祸。
Showoff
將以makrdown寫(xiě)的幻燈與showoff.json
組織在起一起,打開(kāi)瀏覽器并運(yùn)行showoff serve
3D Cube Slideshow
![](http://cu3ox.com/images/horiz_lines.png)
非逞罢蹋酷的三維轉(zhuǎn)場(chǎng)效果刃泌。
Cleaver
![](http://www.egrappler.com/wp-content/uploads/2013/12/Cleaver.jpg)
號(hào)稱(chēng)黑客三十稱(chēng)就可以用的幻燈。
Mosho
![](http://www.egrappler.com/wp-content/uploads/2013/12/HTML5CSS3JS-Presentation-Framework.jpg)
受到impress.js的啟發(fā)署尤,但使用了css3的3D轉(zhuǎn)場(chǎng)效果耙替,具有非線性鏈接。
Awwation
![](http://www.egrappler.com/wp-content/uploads/2013/12/Create-Zooming-Presentations-Awwation.jpg)
仿prezi效果曹体。
Presenteer.js
![](http://www.egrappler.com/wp-content/uploads/2013/12/Flexible-HTML5-Presentation-Tool-Presenteer.js.jpg)
使用css3變形與轉(zhuǎn)場(chǎng)的html5幻燈俗扇。
Presentz
![](http://www.egrappler.com/wp-content/uploads/2013/12/A-JavaScript-Library-for-Synchronizing-Videos-and-Slides-Presentz.jpg)
可以把Vimeo, Youtube,Slideshare上的內(nèi)容整合到幻燈中箕别。
Collage.js
![](http://ozan.io/collage/logo.png)
可以選擇純 JavaScript方式或是node.js方式,顯示出二維拼貼效果的幻燈铜幽。
[下載Collage.js](https://github.com/oztu/collage/archive/master.zip)
Tacion.js
![](http://www.egrappler.com/wp-content/uploads/2013/12/jQuery-Mobile-Framework-for-Creating-Real-time-Presentations-Tacion.js.jpg)
實(shí)時(shí)演示可互動(dòng)的jQuery動(dòng)態(tài)框架
WOW Slider
![](http://3.bp.blogspot.com/-RW1IWApNdXY/UD-zMxCXgXI/AAAAAAAAAF8/Jx1rwEebZMc/s1600/wowslider.png)
讓人WoW地一聲幻燈,可免費(fèi)非商業(yè)使用串稀。
評(píng)論請(qǐng)隨便除抛,打賞請(qǐng)隨意。