what is impress.js
impress.js 是一個用于展示的前端框架,基于大量 css3 的動畫等特性派近。最大的特點是其基于 transform 來構(gòu)建攀唯,通過空間位置的移動以及旋轉(zhuǎn)來體現(xiàn)變化洁桌,視覺沖擊性很強。
該庫需要有很好的css功底以及空間想象能力
你是否已經(jīng)厭倦了那些傳統(tǒng)的幻燈片形式的表現(xiàn)方式侯嘀?
你是否也認(rèn)為在現(xiàn)代瀏覽器里另凌,表現(xiàn)形式不應(yīng)該受‘傳統(tǒng)’的幻燈片模式的限制?
你是否希望讓你的演講以令人震撼的視覺效果來打動你的觀眾戒幔?
那么你應(yīng)該試一試? ?impress.js
它是一個展現(xiàn)工具?
是受prezi.com的啟發(fā)?
使用了現(xiàn)代瀏覽器里支持的CSS3 transforms 和 transitions功能吠谢。
把你的雄偉思想可視化
你的小小想法立體化
在無限的畫布上通過定位,旋轉(zhuǎn)和縮放把它們表現(xiàn)出來
如何用 impress.js 設(shè)計 presentation(外觀)
基本思路
對于每個頁面來說只有三種重要的屬性——scale诗茎,position工坊,rotate献汗。
scale 決定了該頁的大小。對應(yīng)屬性 width王污,height
position 決定了在三維空間中的坐標(biāo)罢吃。對應(yīng)屬性 transform
rotate 則是旋轉(zhuǎn)方式。對應(yīng)屬性 rotate[XYZ]
繞 X 軸
繞 Y 軸
繞 Z 軸
impress.js 會根據(jù)這些屬性將每一頁進行渲染昭齐,最后從第一頁開始一步步進行播放尿招,因此這些屬性也就決定了補間動畫的形式。在開始寫代碼之前一定要想好空間結(jié)構(gòu)阱驾。
為一個step的class增加slide標(biāo)簽就谜,那么你就得到了一張帶白色背景和一些特殊樣式的類似ppt單張的div,
當(dāng)然里覆,這些樣式是需要引入impress-demo.css的丧荐,你不引入的話是沒有的。也可以自己修改定義喧枷,事實上原作者建議你這么做
數(shù)據(jù)屬性:用來描述幻燈片大小篮奄,切換等效果。
data-x = 幻燈片的x坐標(biāo)
data-y = 幻燈片的y坐標(biāo)
data-scale = 通過指定一個值來進行縮放割去,data-scale為5則將會在你幻燈片原始尺寸基礎(chǔ)放大5倍
data-rotate = 通過一個數(shù)字度數(shù)來確定旋轉(zhuǎn)你的幻燈片
data-rotate-x = 為3D用窟却,這個數(shù)字度數(shù)是它應(yīng)該相對x軸旋轉(zhuǎn)多少度。(前傾/后仰)
data-rotate-y = 為3D用呻逆,這個數(shù)字度數(shù)是它應(yīng)該相對y軸旋轉(zhuǎn)多少度夸赫。 (左擺/右擺)
data-rotate-z = 為3D用,這個數(shù)字度數(shù)是它應(yīng)該相對z軸旋轉(zhuǎn)多少度咖城。
用它做的不只局限于此茬腿,唯一的限制是你的創(chuàng)造力!
當(dāng)你有把錘子的時候,你看什么都像釘子