我假設凡是對這篇文章有興趣的朋友都是知道impress.js的，如果不知道，您可以搜索一下，或者更直接的，請往下看，您就明白了。
impress.js中文范例 —— 這個(gè)可一定要看一下，不然哪有動(dòng)力應付下面一堆蚊子？
或許有些朋友在尋找如何使用impress.js這個(gè)奇妙的工具的教程，實(shí)際上，它的范例文件中的注釋就是最好的教程了，不過(guò)里面是鳥(niǎo)……英語(yǔ)，所以我翻譯了一下，希望對大家有所幫助。
<!doctype html><!-- 你想知道如何使用impress.js？ 你已經(jīng)開(kāi)始了最初又及其重要的一步 —— 你正在閱讀這份代碼。 這就是 impress.js 展示的構成方式 —— 使用HTML和CSS。 相信我，你必須使用精確的使用HTML和CSS來(lái)高效的使用impress.js。 更重要的是，你得有藝術(shù)細胞，因為在impress.js展示中，我們沒(méi)有準備默認的css樣式和模板。 你得用你聰明的大腦和勤勞的雙手來(lái)規劃和構筑這個(gè)東西。 那么…… 你還是想知道如何使用impress.js么？ --><html lang="en"><head> <meta charset="utf-8" /> <meta name="viewport" content="width=1024" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>impress.js | 使用現代瀏覽器中css3的tranforms和trasitions特性進(jìn)行展示的工具 | by Bartek Szopka @bartaz | 翻譯ed by xishui @ http://eyehere.net</title> <!-- Impress.js不調用任何外部的樣式文件，腳本會(huì )增加所有必要的展示用樣式。 下面這個(gè)樣式文件是為了演示用的，查閱一下它可以搞明白如何對impress.js中的元素渲染、 已經(jīng)顯示一些回調的樣式，不過(guò)我可不希望你直接把它用到你自己的展示中。 哥們兒（or姐們兒？），來(lái)點(diǎn)創(chuàng )意，我們可不能讓所有的impress.js看起來(lái)都是一個(gè)模子里處理的，對吧！ 當你開(kāi)始制作自己的展示時(shí)，把它刪了，從頭開(kāi)始吧，這是件有趣的事情。 --> <link href="css/impress-demo.css" rel="stylesheet" /> <link rel="shortcut icon" href="favicon.png" /> <link rel="apple-touch-icon" href="apple-touch-icon.png" /></head><!-- Body元素往往會(huì )被impress.js設置一些特殊的class，這個(gè)可以很方便的判斷當前的瀏覽器是不是支持 我們所需的css或腳本。 一個(gè)非常有用的class名稱(chēng)是 `impress-not-supported`。這個(gè)class意味著(zhù)這個(gè)瀏覽器不支持impress.js 所要求的特性，所以你可以用這個(gè)類(lèi)來(lái)顯示一些回調的信息。 事實(shí)上倒也不是一定要手動(dòng)的加上這個(gè)class，因為impress.js檢測到以后會(huì )自動(dòng)加上的，不過(guò)萬(wàn)一你的 瀏覽器連JavaScript都不能執行，還是預先加上比較保險。 當impress.js檢測到你的瀏覽器足以運行，這個(gè)class名就會(huì )被移除。 事實(shí)上boday的類(lèi)名也會(huì )根據當前的演示場(chǎng)景改變，我們會(huì )在后面說(shuō)到，就在"hint"的內容里。 --><body class="impress-not-supported"><!-- 比如，我們加一個(gè)回調消息，僅在有`impress-not-supported`類(lèi)名的body下顯示。--><div class="fallback-message"> <p>尊駕的瀏覽器太老土啦！<b>無(wú)法滿(mǎn)足impress.js的要求</b>，現在你只能看到一些最樸素的演示畫(huà)面。</p> <p>為了欣賞漂亮的演示畫(huà)面，請使用先進(jìn)、優(yōu)雅、快速、美麗、免費的現代瀏覽器，比如 <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> 。</p></div><!-- 現在我們開(kāi)始接觸impress.js的核心了。 我們得把所有的演示步驟包裹起來(lái)，在這個(gè)舞臺里impress.js的魔法才可以施展。 倒不一定是個(gè)`<div>`標簽，只不過(guò)`id`一定得是`impress`。 可能現在還用不到，不過(guò)我還是要給你說(shuō)一些可以用在這個(gè)舞臺上的選項。 用類(lèi)似`data-transition-duration="2000"`這樣的屬性來(lái)改變切換場(chǎng)景的速度，默認的話(huà)，是1000（也就是1秒）。 也可以設置`data-perspective="500"`來(lái)改變透視的深度，默認是1000。如果設置為0的話(huà)，美麗的3D效果 就離我們遠去了。 這個(gè)事情還是頗為復雜的，你可以參考下面的地址了解更多（還是英文的）： https://developer.mozilla.org/en/CSS/perspective 不過(guò)就像我剛剛所說(shuō)的那樣，你現在應該還用不著(zhù)這些設置 —— 默認的就很好了。 --><div id="impress"> <!-- 接下來(lái)就要發(fā)生一些有趣的事情了。 所有在`#impress`中并且有`step`類(lèi)名的元素都是一個(gè)場(chǎng)景。這些個(gè)場(chǎng)景會(huì )被impress.js定位、 旋轉和縮放，我們的‘鏡頭’會(huì )一一的展示它們。 位置信息也是通過(guò)data屬性設置的。 在下面這個(gè)場(chǎng)景里，我們給它設置了`data-x="-1000"`和`data-y="-1500`的屬性。 這意味著(zhù)這個(gè)元素的**中心**（是的，確實(shí)是中心）在整個(gè)幻燈片的(-1000px, -1500px)處。 這個(gè)場(chǎng)景沒(méi)有旋轉和縮放。 --> <div id="bored" class="step slide" data-x="-1000" data-y="-1500"> <q>你是不是覺(jué)得傳統的幻燈片都 <b>弱爆了</b> ？</q> </div> <!-- `id`屬性?xún)H僅是用來(lái)表示場(chǎng)景的URL的，事實(shí)上也不是必須的東西。 即使你沒(méi)有給它定義，你依然可以使用`step-N`來(lái)找到這一幕。 比如說(shuō)下面這個(gè)場(chǎng)景就可以叫做`step-2`。 這個(gè)URL的錨部分就應該是`#/step-2`。 你也可以在一個(gè)鏈接里使用`#step-2`，這可以直接定位到這個(gè)場(chǎng)景。 請注意，`#/step-2`雖然在鏈接中也可以使用，但是并不是推薦的，使用`#step-2`可以在 更廣泛的情況是使用（比如impress.js壓根兒沒(méi)起作用的時(shí)候）。 --> <div class="step slide" data-x="0" data-y="-1500"> <q>你有沒(méi)有想過(guò)，在 <strong>現代瀏覽器</strong> 光輝下，我們可以不再受限于 <strong>老舊瀏覽器的殘忍壓迫</strong> ？</q> </div> <div class="step slide" data-x="1000" data-y="-1500"> <q>你難道不想使用 <strong>華麗的舞臺效果</strong> 來(lái) <strong>震驚你的觀(guān)眾</strong> 嗎？</q> </div> <!-- 這是一個(gè)縮放的效果。 同樣的，我們又使用了`data-`屬性，這一次我們寫(xiě)了一個(gè)`data-scale="4"`，這樣一來(lái)， 這個(gè)元素就會(huì )被放大成原來(lái)的4倍。 如果從這個(gè)場(chǎng)景退出，它會(huì )被還原原來(lái)的大?。s小4倍）。 --> <div id="title" class="step" data-x="0" data-y="0" data-scale="4"> <span class="try">那么，您應該嘗試一下</span> <h1>impress.js<sup>*</sup></h1> <span class="footnote"><sup>*</sup>美式的小幽默，無(wú)視</span> </div> <!-- 這個(gè)場(chǎng)景使用了旋轉。 寫(xiě)法你一定猜到了，我們使用了`data-rotate="90"`屬性，這就意味著(zhù)這這個(gè)場(chǎng)景會(huì )被 順時(shí)針旋轉90度。 --> <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5"> <p>它是一個(gè) <strong>演示工具</strong> <br/> 受<a href="http://prezi.com">prezi.com</a>啟發(fā) <br/> 基于現代瀏覽器中 <strong>強大的CSS3特效</strong> 開(kāi)發(fā)而成</p> </div> <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6"> <p>它可以具象化您 <big style="font-size:larger">偉大</big> </p> </div> <!-- 現在事情變得更歡樂(lè )了，我們開(kāi)始進(jìn)入三維的世界！ 除了`data-x`和`data-y`以外，我們還可以定義第三個(gè)坐標，就是`data-z`。 我們在下一個(gè)例子上加上了`data-z="-3000"`，意味著(zhù)這個(gè)場(chǎng)景離我們有3000px那么遠。 --> <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1"> <p>或者 <span style="font-size:smaller">細致</span> 的 <span class="thoughts">想法</span></p> </div> <!-- 下面這個(gè)場(chǎng)景并沒(méi)有展示新的data屬性，但是你應該可以看到這里面有些字是動(dòng)的。 這些是非?；A的CSS transition動(dòng)畫(huà)，當這個(gè)場(chǎng)景開(kāi)始后，我們就讓它們開(kāi)始播放。 在演示剛開(kāi)始的時(shí)候，所有的step元素都有一個(gè)`future`類(lèi)，也就是說(shuō)它們還沒(méi)有開(kāi)始上演。 當舞臺進(jìn)入某個(gè)場(chǎng)景，這個(gè)場(chǎng)景被貼上了`present`的類(lèi)標簽，這就是動(dòng)畫(huà)的秘密—— 字符在`present`類(lèi)里面發(fā)生動(dòng)畫(huà)。 當場(chǎng)景完畢，`present`類(lèi)就被移除了，寫(xiě)上一個(gè)`past`的類(lèi)。 簡(jiǎn)而言之，每個(gè)場(chǎng)景都會(huì )具有`future`、`present`、`past`中某一個(gè)的類(lèi)，只有當前 播放的step元素具有`present`類(lèi)屬性。 --> <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6"> <p>它在一個(gè)無(wú)線(xiàn)大的畫(huà)布上，展示了 <b class="positioning">定位</b> , <b class="rotating">旋轉</b> 和 <b class="scaling">縮放</b> 的特效</p> </div> <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6"> <p><b class="imagination">心</b>有多大，<b>舞臺</b>就有多大</p> </div> <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4"> <p>想知道更多嗎？</p> <q><a href="http://github.com/bartaz/impress.js">查看源碼吧</a>, 兄臺!</q> </div> <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2"> <p>哦，還有一件事情……</p> </div> <!-- 最后我們演示一下impress.js強大的靈活性。 你不僅僅可以再3D空間中定位一個(gè)物體，同樣的也能在3D中旋轉一個(gè)物體！ 所以我們這里沿著(zhù)X軸旋轉-40度（逆時(shí)針旋轉40度），沿著(zhù)Y軸旋轉10度（順時(shí)針）。 當然你也可以沿著(zhù)z軸旋轉`data-rotate-z`——我想你猜到了，這和`data-rotate`是一個(gè)效果。 --> <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2"> <p><span class="have">你</span> <span class="you">有沒(méi)有</span> <span class="noticed">注意到</span> <span class="its">它</span> <span class="in">是</span> <b>3D<sup>*</sup></b>的？</p> <span class="footnote">* prezi可沒(méi)這能力</span> </div> <!-- 我們最后來(lái)整理一下所有的屬性： * `data-x`, `data-y`, `data-z` —— 它們定義了元素中心在畫(huà)布的位置，默認是0； * `data-rotate-x`, `data-rotate-y`, 'data-rotate-z`, `data-rotate` —— 它們定義了元素 沿著(zhù)指定軸旋轉的角度，默認是0；`data-rotate` 和 `data-rotate-z`是一回事； * `data-scale` —— 定義了元素縮放的比率，默認是1； 這些值會(huì )被impress.js讀取并寫(xiě)入CSS的transformation變化，你可以在下面網(wǎng)址查看更多信息： https://developer.mozilla.org/en/CSS/transform --> <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10"> </div></div><!-- Hint其實(shí)和impress.js沒(méi)有半點(diǎn)關(guān)系。 不過(guò)它演示一種創(chuàng )造性的使用impress.js的方法。 當某一個(gè)場(chǎng)景顯示的時(shí)候，它會(huì )獲得`active`類(lèi)屬性（譯注：確實(shí)，除了上面的present以外還有一個(gè)active）， 同時(shí)body元素會(huì )有一個(gè)`impress-on-ID`（ID就是當前顯示的場(chǎng)景的id）的類(lèi)... 聽(tīng)起來(lái)很讓人迷惑，舉個(gè)栗子，當我們的第一張幻燈片顯示的時(shí)候，它的id是`bored`，那么我們的body 就有一個(gè)叫做`impress-on-bored`的類(lèi)名。 我們就是用這個(gè)類(lèi)來(lái)顯示下面的Hint，查看一下CSS文件，我們延時(shí)的顯示了操作方法。 ... 當然這里面還有一些JavaScript的代碼…… 孩子，千萬(wàn)不要再家里模仿這樣的做法：） 我們只是為了演示對應觸摸設備的提示而隨便寫(xiě)寫(xiě)的，你應該把這代碼寫(xiě)到一個(gè)獨立的JS文件里， 而且這個(gè)演示也應該放在HTML里的某個(gè)地方，而不是寫(xiě)死在代碼里。 不過(guò)我只是隨口說(shuō)所;) --><div class="hint"> <p>使用空格或者方向鍵來(lái)移動(dòng)</p></div><script>if ("ontouchstart" in document.documentElement) { document.querySelector(".hint").innerHTML = "<p>向左或向右拖動(dòng)屏幕來(lái)移動(dòng)</p>";}</script><!-- 最后，但遠遠不是結束。 為了讓上述的動(dòng)作順利進(jìn)行，我們必須在頁(yè)面里包含impress.js這個(gè)文件。 建議你使用一個(gè)壓縮過(guò)的文件。 我這里包含了一個(gè)未壓縮的版本，這樣可以增加可讀性（譯注：為了省流量，我用了壓縮的）。 你同時(shí)還需要使用`impress().init()`函數來(lái)初始化impress.js，你應該在最后調用這個(gè)函數。 并不僅僅因為這是個(gè)好習慣，而且這樣會(huì )保證當頁(yè)面加載完成后執行。 當然你可以使用“DOM ready”事件，但是我比較懶;) --><script src="js/impress.js"></script><script>impress().init();</script><!-- `impress()` 函數給了你一個(gè)控制演示API的方法。 把結果放在一個(gè)變量里： var api = impress(); 這樣你就可以使用幾個(gè)可以使用的方法： `api.init()` - 初始化演示； `api.next()` - 播放下一個(gè)幻燈片； `api.prev()` - 回到上一個(gè)幻燈片； `api.goto( idx | id | element, [duration] )` - 通過(guò)知道那個(gè)id或者DOM播放指定的幻燈片 可以指定轉換時(shí)間（單位毫秒），當然時(shí)間可以是缺省的。 你可以隨時(shí)再次調用`impress()`來(lái)再一次獲得這個(gè)API，類(lèi)似`impress().next()`當然也是可以的。 不用擔心，這不會(huì )再一次的初始化impress。 --></body></html><!-- OK，現在你或多或少的了解impress.js了，但是在你開(kāi)始之前…… 你從GitHub上復制了代碼（譯注：或者你從我博客上復制了代碼)？ 你已經(jīng)在編輯器里打開(kāi)了它？ 雅美蝶！ 這不是你創(chuàng )造你的演示的正確方法，這只是個(gè)代碼，你的想法才是好的演示的根本。 所以，如果你想做個(gè)好演示，取來(lái)一張紙一支筆，然后關(guān)了你的電腦。 描、繪、寫(xiě)，現在紙上進(jìn)行一場(chǎng)頭腦風(fēng)暴，試著(zhù)做一個(gè)思維導圖，這個(gè)才能幫助你怎樣更好的 創(chuàng )建impress.js的作品。 當你在紙上完成了工程，再回到impress.js吧，一開(kāi)始就用它毫無(wú)意義，只是浪費時(shí)間而已。 如果你覺(jué)得我在胡扯，去看看一本叫做"Presentation Zen"（中譯《演說(shuō)之禪》，貌似還沒(méi)有中文版） 的書(shū)吧，這本書(shū)能給你更多更好的創(chuàng )建演示的方法和知識。 請虛心接受我的意見(jiàn)，“因為你都不知道該說(shuō)些什么，impress.js更加不知道”。 --><!-- 這里是作者的一些碎碎念，就不翻啦~ 歡迎各位留下寶貴意見(jiàn)大家相互交流[http://eyehere.net/impress-js-chinese-course-tutorial] -->
impress.js雖然真的很不錯，但還遠遠說(shuō)不上盡善盡美，比如它還沒(méi)有辦法對一個(gè)幻燈片的內容做到逐個(gè)顯示的功能，不過(guò)我看大約半個(gè)月前作者開(kāi)始做這方面的工作了，等新版本放出來(lái)以后，我會(huì )再追加上去的~
對了，感覺(jué)用純手工的方式制作，確實(shí)還是很辛苦的，所以有好心人制作了GUI工具幫助你創(chuàng )建演示，我找到了Impressionist 和 Strut，個(gè)人試用下來(lái)，還是覺(jué)得Strut更好用，你也可以實(shí)際嘗試一下。
再PS，后來(lái)發(fā)現有人在Github上發(fā)布了中文版了呀，嘛，就當學(xué)習了^_
