閱讀(3k) 書簽贊(0) 我要糾錯

JavaScript輕量級框架系列（1）

2018-06-09 16:12 更新

大綱

1. 配置
2. 數(shù)據(jù)屬性
3. 創(chuàng)建
4. 全局預覽
5. 總結

本文是JavaScript輕量級框架系列的第一篇文章。

Impress.js是基于webkit內(nèi)核瀏覽器（Chrome、Safari等）開發(fā)，而在其他基于非webkit引擎但支持CSS3 3D的瀏覽器也能正常運行。

Impress.js源碼已經(jīng)發(fā)布在Github上，地址：https://github.com/bartaz/impress.js
官方demo地址：http://bartaz.github.com/impress.js

配置

html5頁面結構先準備就緒
創(chuàng)建一個id="impress"的wrapper，可以直接是一個div，當然其他標簽也是可以的
在body標簽結束前引入impress.js文件并且調(diào)用
class="impress-not-supported"是當瀏覽器不支持時顯示給用戶的提示信息，降級處理

<!doctype html>
<html>
<head>
    <title>darren - Impress demo</title>
    <meta charset="utf-8" />
    <link  rel="external nofollow" target="_blank"  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" rel="external nofollow" ></script>
    <script>
        impress().init();
    </script>
</body>
</html>

在wrapper內(nèi)創(chuàng)建一個幻燈片只需要新建一個class="step"的<div>即可。
<div>的id可有可無，當有id時url中的hash變化是隨著id走；反之就是step-[num]。

數(shù)據(jù)屬性

data-x 幻燈片的x坐標
data-y 幻燈片的y坐標
data-scale 通過指定一個值來進行縮放，data-scale為5則將會在你幻燈片原始尺寸基礎上放大5倍
data-rotate 通過一個數(shù)字度數(shù)來確定旋轉你的幻燈片
data-rotate-x 為3D用，這個數(shù)字度數(shù)是它應該相對 x軸旋轉多少度（前傾、后仰）
data-rotate-y 為3D用，這個數(shù)字度數(shù)是它應該相對 y軸旋轉多少度（左擺、右擺）
data-rotate-z 為3D用，這個數(shù)字度數(shù)是它應該相對 z軸旋轉多少度

創(chuàng)建

從一個出師的幻燈片開始，這個幻燈片已將它的data-x和data-y數(shù)據(jù)屬性設置為0，所以會出現(xiàn)在頁面的中間。

<div class="step" data-x="0" data-y="0">
    This is slide1
</div>

第二個幻燈片的data-x的值為500，data-y的值為0，活動的時候它將會向左平移（滑動）500px的地方。

<div class="step" data-x="500" data-y="0">
    This is slide2
</div>

第三張幻燈片其data-x值不變，data-y為-400，這將會是從頂部400px處滑入屏幕。

<div class="step" data-x="500" data-y="-400">
    This is slide3
</div>

第四張幻燈片來個新花樣，使用data-scale的值控制其縮放大小。data-scale="0.5"表示著它應該是一半的尺寸，當它變成活動的演示時將通過必需的倍數(shù)調(diào)節(jié)所有幻燈片的縮放尺寸，從這一步絢麗開始起步。

<div class="step" data-x="500" data-y="-800" data-scale="0.5">
    This is slide 4
</div>

第五張幻燈片旋轉屬性允許你旋轉一個幻燈片到當前視圖，幻燈片5被設置旋轉90度，視覺效果略屌哈。

<div class="step" data-x="0" data-y="-800" data-rotate="90">
    This is slide 5
</div>

第六張幻燈片開始3D style，可為每個維度的軸指定旋轉屬性(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后面插入一段html。

<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>

隨著你幻燈片位置的不同所以全局預覽的值也會不一樣，拿著結尾處的demo一點一點調(diào)整找感覺，希望你會喜歡！

完成后請記住它，用它做的不只局限于此，唯一的限制是你的創(chuàng)造力！

總結

正因為我們是前端，所以用前端技術做做各種嘗試沒什么不好，impress.js更可以讓我們的演示文稿更有新意，所以簡單了解下絕對是值得的，學習是最好的投資。

優(yōu)點，

個人非常喜歡overview的功能
因為HTML+CSS都需要自己完成，位置和效果都得自己經(jīng)手，視覺效果都由自己掌控
在我用過的同類產(chǎn)品中視覺效果最絢，CSS3+3D效果，直接給觀眾看暈:)

缺點，

impress在視覺表現(xiàn)上確實非常強大，比起同樣做演示文稿的html5slides和deck.js，impress.js的復雜度上高了不少，而且如果想把演示文稿排版的好看可能需要花掉大量的時間。
- 如果嫌impress.js麻煩的朋友可以去看看html5slides和deck.js的資料，視覺效果會稍差一些，不過上手會簡單不少
不要把3D和旋轉用得太花哨、太絢，看的人會暈，恰當就好。