使用impress.js制作幻燈片

更新時間：2015年09月09日 11:33:41 投稿：mrr

impress.js是一款新興的幻燈工具，它的效果類似Prezi，但是擁有3D的功能，而且是在MIT&GPL協(xié)議下開源，對于有一定的Web開發(fā)基礎(chǔ)的人而言，真是一個福音，只需要簡單的用些html指令，并加載impress.js就可以制作出一個縮放式幻燈，朋友們感興趣吧，快來一起學習吧。

上周看到一個朋友做了很炫的縮放式幻燈片，可能因為對此知識了解的不多，找了好久才找到幾個web幻燈片工具。通過篩選決定用Geek的 impress.js 。

impress.js是一款新興的幻燈工具，它的效果類似Prezi，但是擁有3D的功能，而且是在MIT&GPL協(xié)議下開源，對于有一定的Web開發(fā)基礎(chǔ)的人而言，真是一個福音！只需要簡單的用一些html指令，并加載impress.js就可以制作出一個很絢麗的縮放式幻燈。

制作時首先你需要寫一些head，這和普通的Web是一樣的，但body不同。由于目前impress.js只支持Chrome、Firefox和Safari這樣的現(xiàn)代瀏覽器（摸摸IE……），所以需要一個fallback message。

<body class="impress-not-supported">
<div class="fallback-message">
  <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
  <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

然后開始寫真正的主體，impress部分。這部分必須完全被框在“\ < div id="impress"\ >”之中。

第一中幻燈片是step slide，這個和普通的幻燈片很像，就是一頁一頁的。可以用如下的方法添加

<div id="page1" class="step slide" data-x="-1000" data-y="-1500">
  <q>第一頁的幻燈片</q>
</div>

你需要寫的是id、data-x和data-y。id就是一個名稱，而data-x、data-y則是坐標。事實上impress.js是給你了一個很大場地布景，而你需要的就是把一張張幻燈片扔進去，放到恰當?shù)奈恢?。然后它會按照你扔的順序進行展示。其實坐標還有一個，是data-z，這個坐標可以把你帶入3D效果之中，進行縮放。

另一種幻燈就叫做step，不像前一種有個死板的框，這種幻燈片徹底去掉了限制你的框，而是直接的寫在背景上。請看下面這個例子：

<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
  <span>你看到的幻燈片由</span>
  <h1>impress.js</h1>
  <span>給你呈現(xiàn)</span>
</div>

這里特別的是有一個data-scale，表示這個幻燈片的大小，你可以把一頁做得非常大或者非常小，來提供一個縮放的反差。還有一個旋轉(zhuǎn)功能：

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
  <p>這是一個 <strong>presentation tool</strong> <br/>
  作者從 <a >prezi.com</a> 得到靈感<br/>
  利用現(xiàn)代瀏覽器<strong>CSS3 transforms and transitions</strong>的力量</p>
</div>

上面的data-rotate就是表示旋轉(zhuǎn)的角度。

最后，你可以提供一個hint，告訴用戶需要使用鍵盤的方向鍵來控制整個播放過程。如果用戶剛點開幻燈片而沒反應，這個提示會自動浮現(xiàn)。

<div class="hint">
  <p>請用方向鍵控制</p>
</div>

在頁面的最后，你需要加載impress.js，我這里是直接引用作者的頁面，但如果是離線的展示，建議下載下來使用。僅僅加載js是不夠的，還需要用impress().init()來啟動。

<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>

事實上這個工具功能還有很多，我只是學了一些最基本的功能。官網(wǎng)的建議是直接看他提供的index.html，里面有詳細的注釋告訴你有什么功能，我做了一個頁面，也是從作者提供的index.html改出來的。雖然這些東西很簡單，但做一個演講使用的幻燈片，也已經(jīng)足夠好了。我做的頁面放在Gist上，整體代碼見本頁最后。

當然類似的工具不能不提Prezi，它是這個創(chuàng)意的最初實現(xiàn)，不過據(jù)說不支持中文。國內(nèi)騰訊AlloyTeam也開發(fā)了一個叫做 iPresst 的工具，可以說是傻瓜級的好東西，不過由于是社交網(wǎng)絡(luò)式的，有點不夠隱私。impress.js最大的缺陷就是太Geek了，如果能夠有個所見即所得的開發(fā)工具，一定能夠推廣開來。

<!doctype html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=1024" />
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <title>impress.js 嘗試</title>
  <link  rel="stylesheet" />
 <link  rel="stylesheet" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
 <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
 <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

<div id="impress">
 <div id="page1" class="step slide" data-x="-1000" data-y="-1500">
  <q>第一頁的幻燈片：<br/>是否嘗試過這樣<b>幻燈</b>？</q>
  <q>這種幻燈片最初由Prezi帶給世界</q>
 </div>
 <div class="step slide" data-x="0" data-y="-1500">
  <q>這種幻燈片通過ZUI的方式，徹底擺脫了傳統(tǒng)幻燈片的“盒子限制”</q>
  <q><strong>唯一限制你的是你的創(chuàng)意！</strong></q>
 </div>
 <div class="step slide" data-x="1000" data-y="-1500">
  <q>后面還有<font color="red"><strong>更多驚喜！</strong></font></q>
 </div>
 <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
  <span>你看到的幻燈片由</span>
  <h1>impress.js</h1>
  <span>給你呈現(xiàn)</span>
 </div>
 <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
  <p>這是一個 <strong>presentation tool</strong> <br/>
  作者從 <a >prezi.com</a> 得到靈感<br/>
  利用現(xiàn)代瀏覽器<strong>CSS3 transforms and transitions</strong>的力量</p>
 </div>
 <div id="big" class="step" data-x="4000" data-y="2100" data-rotate="180" data-scale="6">
  <p>將你的想法視覺化</p>
 </div>
 <div id="end" class="step" data-x="7000" data-y="2500" data-rotate="90" data-scale="6">
  <p>請看<a ><b>impress.js</b></a>
  <br/>
  開放的幻燈工具</p>
 </div>
 <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
 </div>
</div>

<div class="hint">
 <p>請用方向鍵控制</p>
</div>

<script>
if ("ontouchstart" in document.documentElement) { 
 document.querySelector(".hint").innerHTML = "<p>請用方向鍵控制</p>";
}
</script>
<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>

以上內(nèi)容就是我給大家分享的使用impress.js制作幻燈片，代碼很簡單，希望對大家學習有所幫助。

您可能感興趣的文章: