impress

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)你有把錘子的時候,你看什么都像釘子

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末宜雀,一起剝皮案震驚了整個濱河市切平,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌辐董,老刑警劉巖悴品,帶你破解...
    沈念sama閱讀 219,490評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異简烘,居然都是意外死亡苔严,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評論 3 395
  • 文/潘曉璐 我一進店門孤澎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來届氢,“玉大人,你說我怎么就攤上這事覆旭⊥俗樱” “怎么了岖妄?”我有些...
    開封第一講書人閱讀 165,830評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長寂祥。 經(jīng)常有香客問我衣吠,道長,這世上最難降的妖魔是什么壤靶? 我笑而不...
    開封第一講書人閱讀 58,957評論 1 295
  • 正文 為了忘掉前任缚俏,我火速辦了婚禮,結(jié)果婚禮上贮乳,老公的妹妹穿的比我還像新娘忧换。我一直安慰自己,他們只是感情好向拆,可當(dāng)我...
    茶點故事閱讀 67,974評論 6 393
  • 文/花漫 我一把揭開白布亚茬。 她就那樣靜靜地躺著,像睡著了一般浓恳。 火紅的嫁衣襯著肌膚如雪刹缝。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,754評論 1 307
  • 那天颈将,我揣著相機與錄音梢夯,去河邊找鬼。 笑死晴圾,一個胖子當(dāng)著我的面吹牛颂砸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播死姚,決...
    沈念sama閱讀 40,464評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼人乓,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了都毒?” 一聲冷哼從身側(cè)響起色罚,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎账劲,沒想到半個月后戳护,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,847評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡涤垫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,995評論 3 338
  • 正文 我和宋清朗相戀三年姑尺,在試婚紗的時候發(fā)現(xiàn)自己被綠了竟终。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蝠猬。...
    茶點故事閱讀 40,137評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖统捶,靈堂內(nèi)的尸體忽然破棺而出榆芦,到底是詐尸還是另有隱情柄粹,我是刑警寧澤,帶...
    沈念sama閱讀 35,819評論 5 346
  • 正文 年R本政府宣布匆绣,位于F島的核電站驻右,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏崎淳。R本人自食惡果不足惜堪夭,卻給世界環(huán)境...
    茶點故事閱讀 41,482評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望拣凹。 院中可真熱鬧森爽,春花似錦、人聲如沸嚣镜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽菊匿。三九已至付呕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間跌捆,已是汗流浹背徽职。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留佩厚,地道東北人活箕。 一個月前我還...
    沈念sama閱讀 48,409評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像可款,于是被迫代替她去往敵國和親育韩。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,086評論 2 355

推薦閱讀更多精彩內(nèi)容