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