資訊專欄INFORMATION COLUMN
摘要：前兩天學(xué)長(zhǎng)回學(xué)校進(jìn)行洗腦宣講，做了一個(gè)看上去很炫的縮放式幻燈片。可以用如下的方法添加第一頁(yè)的幻燈片你需要寫的是和。如果用戶剛點(diǎn)開幻燈片而沒反應(yīng)，這個(gè)提示會(huì)自動(dòng)浮現(xiàn)。雖然這些東西很簡(jiǎn)單，但做一個(gè)演講使用的幻燈片，也已經(jīng)足夠好了。
前兩天學(xué)長(zhǎng)回學(xué)校進(jìn)行洗腦宣講，做了一個(gè)看上去很炫的縮放式幻燈片。我不知道是不是太淺薄了，找了很久才找到幾個(gè)Web幻燈片工具。看了幾個(gè)之后，我決定學(xué)習(xí)一下其中最Geek的impress.js。
impress.js是一款新興的幻燈工具，它的效果類似Prezi，但是擁有3D的功能，而且是在MIT&GPL協(xié)議下開源，對(duì)于有一定的Web開發(fā)基礎(chǔ)的人而言，真是一個(gè)福音！只需要簡(jiǎn)單的用一些html指令，并加載impress.js就可以制作出一個(gè)很絢麗的縮放式幻燈。
制作時(shí)首先你需要寫一些head，這和普通的Web是一樣的，但body不同。由于目前impress.js只支持Chrome、Firefox和Safari這樣的現(xiàn)代瀏覽器（摸摸IE……），所以需要一個(gè)fallback message。
然后開始寫真正的主體，impress部分。這部分必須完全被框在“ < div id="impress" >”之中。
第一中幻燈片是step slide，這個(gè)和普通的幻燈片很像，就是一頁(yè)一頁(yè)的。可以用如下的方法添加
第一頁(yè)的幻燈片
你需要寫的是id、data-x和data-y。id就是一個(gè)名稱，而data-x、data-y則是坐標(biāo)。事實(shí)上impress.js是給你了一個(gè)很大場(chǎng)地布景，而你需要的就是把一張張幻燈片扔進(jìn)去，放到恰當(dāng)?shù)奈恢谩Ｈ缓笏鼤?huì)按照你扔的順序進(jìn)行展示。其實(shí)坐標(biāo)還有一個(gè)，是data-z，這個(gè)坐標(biāo)可以把你帶入3D效果之中，進(jìn)行縮放。
另一種幻燈就叫做step，不像前一種有個(gè)死板的框，這種幻燈片徹底去掉了限制你的框，而是直接的寫在背景上。請(qǐng)看下面這個(gè)例子：
你看到的幻燈片由impress.js
給你呈現(xiàn)
這里特別的是有一個(gè)data-scale，表示這個(gè)幻燈片的大小，你可以把一頁(yè)做得非常大或者非常小，來提供一個(gè)縮放的反差。還有一個(gè)旋轉(zhuǎn)功能：
這是一個(gè) presentation tool
作者從 prezi.com 得到靈感
利用現(xiàn)代瀏覽器CSS3 transforms and transitions的力量
上面的data-rotate就是表示旋轉(zhuǎn)的角度。
最后，你可以提供一個(gè)hint，告訴用戶需要使用鍵盤的方向鍵來控制整個(gè)播放過程。如果用戶剛點(diǎn)開幻燈片而沒反應(yīng)，這個(gè)提示會(huì)自動(dòng)浮現(xiàn)。
請(qǐng)用方向鍵控制
在頁(yè)面的最后，你需要加載impress.js，我這里是直接引用作者的頁(yè)面，但如果是離線的展示，建議下載下來使用。僅僅加載js是不夠的，還需要用impress().init()來啟動(dòng)。
事實(shí)上這個(gè)工具功能還有很多，我只是學(xué)了一些最基本的功能。官網(wǎng)的建議是直接看他提供的index.html，里面有詳細(xì)的注釋告訴你有什么功能，我做了一個(gè)頁(yè)面，也是從作者提供的index.html改出來的。雖然這些東西很簡(jiǎn)單，但做一個(gè)演講使用的幻燈片，也已經(jīng)足夠好了。我做的頁(yè)面放在Gist上，整體代碼見本頁(yè)最后。
當(dāng)然類似的工具不能不提Prezi，它是這個(gè)創(chuàng)意的最初實(shí)現(xiàn)，不過據(jù)說不支持中文。國(guó)內(nèi)騰訊AlloyTeam也開發(fā)了一個(gè)叫做iPresst的工具，可以說是傻瓜級(jí)的好東西，不過由于是社交網(wǎng)絡(luò)式的，有點(diǎn)不夠隱私。impress.js最大的缺陷就是太Geek了，如果能夠有個(gè)所見即所得的開發(fā)工具，一定能夠推廣開來。
impress.js 嘗試
第一頁(yè)的幻燈片：
是否嘗試過這樣幻燈？
這種幻燈片最初由Prezi帶給世界
你看到的幻燈片由
impress.js
給你呈現(xiàn)
這是一個(gè) presentation tool
作者從 prezi.com 得到靈感
利用現(xiàn)代瀏覽器CSS3 transforms and transitions的力量
將你的想法視覺化
請(qǐng)看impress.js
開放的幻燈工具
請(qǐng)用方向鍵控制
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87518.html
摘要：由于是線上發(fā)布，所有有部分人問我怎么正確的使用它。因?yàn)闆]有在實(shí)際的項(xiàng)目頁(yè)面設(shè)置幫助文檔。需求為了看到效果，請(qǐng)使用目前并不兼容早期的版本。第四張幻燈片來個(gè)新花樣，使用的值控制其縮放大小。 可以先看一個(gè)demo：http://dwqs.github.io/resume 昨天，我寫了一些關(guān)于Impress.js的東西，對(duì)于創(chuàng)建在線的自我展示，這是一個(gè)非常不錯(cuò)的JavaScript庫(kù)。由于是...
摘要：上有趣又實(shí)用的前端項(xiàng)目持續(xù)更新，歡迎補(bǔ)充幻燈片展示框架一個(gè)專門用來做幻燈片的框架，支持和語(yǔ)法。又一個(gè)幻燈片展示框架一個(gè)受的啟發(fā)，使用了現(xiàn)代瀏覽器里支持的和的特效幻燈片。我的個(gè)人網(wǎng)站首頁(yè)也是用開發(fā)的。好在有可以幫助我們解決這個(gè)問題。 github 上有趣又實(shí)用的前端項(xiàng)目（持續(xù)更新，歡迎補(bǔ)充） 1. reveal.js: 幻燈片展示框架 一個(gè)專門用來做 HTML 幻燈片的框架，支持 HTM...
摘要：上有趣又實(shí)用的前端項(xiàng)目持續(xù)更新，歡迎補(bǔ)充幻燈片展示框架一個(gè)專門用來做幻燈片的框架，支持和語(yǔ)法。又一個(gè)幻燈片展示框架一個(gè)受的啟發(fā)，使用了現(xiàn)代瀏覽器里支持的和的特效幻燈片。我的個(gè)人網(wǎng)站首頁(yè)也是用開發(fā)的。好在有可以幫助我們解決這個(gè)問題。 github 上有趣又實(shí)用的前端項(xiàng)目（持續(xù)更新，歡迎補(bǔ)充） 1. reveal.js: 幻燈片展示框架 一個(gè)專門用來做 HTML 幻燈片的框架，支持 HTM...
摘要：構(gòu)造一個(gè)事件，該事件以命名，用處理數(shù)據(jù)，并在上執(zhí)行。導(dǎo)航事件鍵盤處理導(dǎo)航按鍵被按下時(shí)防止不允許被按下的鍵被意外按下方法阻止元素發(fā)生默認(rèn)的行為。的切換主要通過來實(shí)現(xiàn)，跳轉(zhuǎn)至以參數(shù)索引或元素名標(biāo)記的。 引子 斷斷續(xù)續(xù)用了好幾天，終于把 impress.js 源碼看完，作為剛?cè)腴T的前端菜鳥，這是我第一次看 js 源碼，最初還是比較痛苦的。不過還好，impress.js源碼的注釋相當(dāng)清楚...
閱讀 3574·2019-08-30 15:55
閱讀 1373·2019-08-29 16:20
閱讀 3656·2019-08-29 12:42
閱讀 2661·2019-08-26 10:35
閱讀 1010·2019-08-26 10:23
閱讀 3405·2019-08-23 18:32
閱讀 897·2019-08-23 18:32
閱讀 2892·2019-08-23 14:55
