博客一歇就是半年，略慚愧...元旦假期各種愜意：打打Dota(悲催的輸多贏(yíng)少)、滑滑雪；吃吃東西、逛逛街。轉眼兒今天就得上班了，5點(diǎn)早早起床(最近堅持早睡早起)，忍不住分享下前段時(shí)間發(fā)現的前端工程師裝X的利器，所以這新年第一篇博文誕生了:)
你希望別人看到你的演示文稿會(huì )發(fā)出“wow”嗎？你希望使用華麗的效果來(lái)震驚你的觀(guān)眾嗎？ 那咱們往下看
------------------正文分割線(xiàn)------------------
如果你已經(jīng)厭煩了使用PowerPoint制作PPT，那么impress.js是一個(gè)非常好的選擇，用它做的PPT更加直觀(guān)，效果也非常的不錯。裝X是需要一定代價(jià)的，不過(guò)如果你是個(gè)前端愛(ài)好者那么一切就沒(méi)問(wèn)題了。當然如果你能勉強明白HTML和CSS也沒(méi)問(wèn)題，看看這篇文章 + 一點(diǎn)點(diǎn)實(shí)踐（把官網(wǎng)上的例子拿來(lái)改改）即可...
impress.js 是國外一位開(kāi)發(fā)者受 Prezi 啟發(fā)，采用 CSS3 與 JavaScript 語(yǔ)言完成的一個(gè)可供開(kāi)發(fā)者使用的表現層框架(演示工具)?，F在普通開(kāi)發(fā)者可以利用 impress.js 自己開(kāi)發(fā)出類(lèi)似效果的演示工具，但性能比基于 FLASH 的 Prezi 更優(yōu)。其功能包括畫(huà)布的無(wú)限旋轉與縮放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同時(shí)，也支持傳統 PowerPoint 形式的幻燈演示。
目前 impress.js 是基于 webkit 瀏覽器（Chrome、Safari）開(kāi)發(fā)，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的瀏覽器也能正常運行。
impreess源碼已經(jīng)發(fā)布在GitHub上，地址：https://github.com/bartaz/impress.js
官方demo地址：http://bartaz.github.com/impress.js
因為在其項目網(wǎng)頁(yè)中卻沒(méi)有找到說(shuō)明文檔&使用文檔，所以這篇文章將一步一步創(chuàng )建一個(gè)較初級的演示文稿，我們接著(zhù)往下走。
請準備好現代瀏覽器：Google Chrome(效果最佳)、Safari或FF.
*我的IE10不支持，不知道為什么很多資料上寫(xiě)著(zhù)IE10也能支持，背了個(gè)催。
<!doctype html><html><head> <title>darren - Impress demo</title> <meta charset="utf-8" /> <link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" /></head><body> <div class="impress-not-supported"> </div> <div id="impress"> </div> <script src="http://bartaz.github.com/impress.js/js/impress.js"></script> <script>impress().init();</script></body></html>
<div class="step"> first slide</div>
data-x = 幻燈片的x坐標
data-y = 幻燈片的y坐標
data-scale = 通過(guò)指定一個(gè)值來(lái)進(jìn)行縮放，data-scale為5則將會(huì )在你幻燈片原始尺寸基礎放大5倍
data-rotate = 通過(guò)一個(gè)數字度數來(lái)確定旋轉你的幻燈片
data-rotate-x = 為3D用，這個(gè)數字度數是它應該相對x軸旋轉多少度。（前傾/后仰）
data-rotate-y = 為3D用，這個(gè)數字度數是它應該相對y軸旋轉多少度。 （左擺/右擺）
data-rotate-z = 為3D用，這個(gè)數字度數是它應該相對z軸旋轉多少度。
數據屬性那段是你接下來(lái)需要重點(diǎn)打交道的，接下來(lái)開(kāi)始step by step創(chuàng )建一個(gè)演示文稿。
從一個(gè)初始的幻燈片開(kāi)始，這個(gè)幻燈片已將它data-x和data-y數據屬性設置為0，所以會(huì )出現在頁(yè)面的中間。
<div class="step" data-x="0" data-y="0"> This is slide 1 - 【標題】</div>
第二個(gè)幻燈片的data-x值為500、data-y值為0，活動(dòng)的時(shí)候它將會(huì )向左平移(滑動(dòng))500px的地方。
<div class="step" data-x="500" data-y="-400"> This is slide 2</div>
第三張幻燈片其data-x值不變，data-y位置為-400，這將會(huì )是從頂部400px處滑入屏幕?！ ?/p>
<div class="step" data-x="500" data-y="-400"> This is slide 3</div>
第四張幻燈片來(lái)個(gè)新花樣，使用data-scale的值控制其縮放大小。data-scale="0.5"表示著(zhù)它應該是一半的尺寸，當它變成活動(dòng)的演示時(shí)將通過(guò)必需的倍數調節所有幻燈片的縮放尺寸，從這一步絢麗開(kāi)始起步
<div class="step" data-x="500" data-y="-800" data-scale="0.5"> This is slide 4</div>
第五張幻燈片旋轉屬性允許你旋轉一個(gè)幻燈片到當前視圖，幻燈片5被設置旋轉90度，視覺(jué)效果微叼哈
<div class="step" data-x="0" data-y="-800" data-rotate="90"> This is slide 5</div>
第六張幻燈片開(kāi)始3D style，可為每個(gè)維度的軸指定旋轉屬性(x,y,z)。x軸是橫軸，意思是你可使事物傾斜(正值)或向后(負值)，y軸是豎軸，所以你可使事物向左搖擺(負值)或向右(正值)，z軸是縱軸，這將是旋轉的東西向上（負值）和向下（正值）。
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4"> This is slide 6</div>
以上6張幻燈片把數據屬性?xún)鹊闹刀歼^(guò)了一遍，一張略high的演示文稿就呈現在我們眼前。你可以以你的想象力用不可思議的和令人驚奇的方式合并這些效果來(lái)創(chuàng )建你自己的幻燈片展示風(fēng)格。
個(gè)人超贊這個(gè)視覺(jué)體驗，把所有的幻燈片都平行的展示，排列的合理會(huì )非常帥氣，使用方式就是在幻燈片6后面插入一段html.
<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>
隨著(zhù)你幻燈片位置的不同所以全局預覽的值也會(huì )不一樣，拿著(zhù)結尾處的demo一點(diǎn)一點(diǎn)調整找感覺(jué)，希望你會(huì )喜歡！
完成后請記住它，用它做的不只局限于此，唯一的限制是你的創(chuàng )造力！
正因為我們是前端，所以用前端技術(shù)做做各種嘗試沒(méi)什么不好，impress更可以讓我們的演示文稿更有新意，所以簡(jiǎn)單了解下絕對是值得的，學(xué)習是最好的投資。
優(yōu)點(diǎn)：
缺點(diǎn)：
以下是demo代碼，初學(xué)者自己動(dòng)手多改改感覺(jué)就好了。
突然想起一句話(huà)作為文章總結吧：“當你有把錘子的時(shí)候,你看什么都像釘子”。
如果覺(jué)得這文章也算用心，請勞駕點(diǎn)右下角的推薦。
今天是2013.1.4，一個(gè)很amazing的日子，不知道今天會(huì )有多少人會(huì )去登記哈，表示 羨慕ing&祝福ing...我也加把勁，hoho
祝大家2013年快樂(lè )、順利.
聯(lián)系客服
