impress.js初體驗

時間  2019-11-19
標籤 impress.js impress 體驗 欄目 JavaScript 简体版
原文   原文鏈接

概述

　　若是你已經厭煩了使用PowerPoint製做PPT，那麼impress.js是一個很是好的選擇，用它作的PPT更加直觀，效果也很是的不錯。裝X是須要必定代價的，不過若是你是個前端愛好者那麼一切就沒問題了。固然若是你能勉強明白HTML和CSS也沒問題，看看這篇文章 + 一點點實踐（把官網上的例子拿來改改）便可...css

　　impress.js 是國外一位開發者受 Prezi 啓發，採用 CSS3 與 JavaScript 語言完成的一個可供開發者使用的表現層框架(演示工具)。如今普通開發者能夠利用 impress.js 本身開發出相似效果的演示工具，但性能比基於 FLASH 的 Prezi 更優。其功能包括畫布的無限旋轉與縮放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同時，也支持傳統 PowerPoint 形式的幻燈演示。html

　　目前 impress.js 是基於 webkit 瀏覽器（Chrome、Safari）開發，而在其它基於非 webkit 引擎，但支持 CSS3 3D 的瀏覽器也能正常運行。前端

　　impreess源碼已經發布在GitHub上，地址：https://github.com/bartaz/impress.jshtml5

　　官方demo地址：http://bartaz.github.com/impress.jsgit

　　由於在其項目網頁中卻沒有找到說明文檔&使用文檔，因此這篇文章將一步一步建立一個較初級的演示文稿，咱們接着往下走。github

　　請準備好現代瀏覽器：Google Chrome(效果最佳)、Safari或FF.
　　*個人IE10不支持，不知道爲何不少資料上寫着IE10也能支持，背了個催。web

 

配置

  1. html5頁面結構先準備就緒
  2. 建立一個id="impress"的wrapper(載體)，直接div就好，其餘標籤一樣也能夠
  3. 在body標籤結束前引入impress.js文件而且調用
  4. class="impress-not-supported"是當瀏覽器不支持時顯示給用戶的提示信息，降級處理你懂的，很少解釋哈
複製代碼 
<!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>
複製代碼

 

  • 在wrapper內建立一個幻燈片只須要新建一個class="step"的<div>便可。<div>的id無關緊要，當有id時url中的hash變化是隨着id走；反之就是step-[num]，如
<div class="step">
    first slide
</div>

 

  •  數據屬性：用來描述幻燈片大小，切換等效果。

　　data-x = 幻燈片的x座標瀏覽器

　　data-y = 幻燈片的y座標app

　　data-scale = 經過指定一個值來進行縮放，data-scale爲5則將會在你幻燈片原始尺寸基礎放大5倍框架

　　data-rotate = 經過一個數字度數來肯定旋轉你的幻燈片

　　data-rotate-x = 爲3D用，這個數字度數是它應該相對x軸旋轉多少度。（前傾/後仰）

　　data-rotate-y = 爲3D用，這個數字度數是它應該相對y軸旋轉多少度。 （左擺/右擺）

　　data-rotate-z = 爲3D用，這個數字度數是它應該相對z軸旋轉多少度。

 

建立

　　數據屬性那段是你接下來須要重點打交道的，接下來開始step by step建立一個演示文稿。

　　從一個初始的幻燈片開始，這個幻燈片已將它data-x和data-y數據屬性設置爲0，因此會出如今頁面的中間。

<div class="step" data-x="0" data-y="0">
    This is slide 1 - 【標題】
</div>

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

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

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

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

　　第四張幻燈片來個新花樣，使用data-scale的值控制其縮放大小。data-scale="0.5"表示着它應該是一半的尺寸，當它變成活動的演示時將經過必需的倍數調節全部幻燈片的縮放尺寸，從這一步絢麗開始起步

<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張幻燈片把數據屬性內的值都過了一遍，一張略high的演示文稿就呈如今咱們眼前。你能夠以你的想象力用難以想象的和使人驚奇的方式合併這些效果來建立你本身的幻燈片展現風格。

 

  • 全局預覽

　　我的超讚這個視覺體驗，把全部的幻燈片都平行的展現，排列的合理會很是帥氣，使用方式就是在幻燈片6後面插入一段html.

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

　　隨着你幻燈片位置的不一樣因此全局預覽的值也會不同，拿着結尾處的demo一點一點調整找感受，但願你會喜歡！

　　完成後請記住它，用它作的不僅侷限於此，惟一的限制是你的創造力！

 

我的體會

　　正由於咱們是前端，因此用前端技術作作各類嘗試沒什麼很差，impress更可讓咱們的演示文稿更有新意，因此簡單瞭解下絕對是值得的，學習是最好的投資。

　　優勢：

  1. 我的很是喜歡overview的功能
  2. 由於HTML+CSS都須要本身完成，位置和效果都得本身經手，視覺效果都由本身掌控
  3. 在我用過的同類產品中視覺效果最絢，CSS3+3D效果，直接給觀衆看暈:)

　　缺點：

  1. impress在視覺表現上確實很是強大，比起一樣作演示文稿的 html5slides 和 deck.js， impress.js的複雜度上高了很多，並且若是想把演示文稿排版的好看可能須要花掉大量的時間.
    *若是閒impress麻煩的朋友能夠去看看 html5slides 和 deck.js的資料，視覺效果會稍差一些，不過上手會簡單很多。
  2. 不要把3D和旋轉用得太花哨、太絢，看的人會暈，恰當就好哈

　　

　　如下是demo代碼，初學者本身動手多改改感受就行了。

<!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 class="fallback-message">
                <p>你的瀏覽器<b>不支持</b> impress.js, 因此當前展現的是簡化版。</p>
                <p>爲了得到更好的體驗，請使用最新的 <b>Chrome</b>, <b>Safari</b> 或者 <b>Firefox</b> 瀏覽器。</p>
            </div>
        </div>
        <div id="impress">
            <div class="step" data-x="0" data-y="0">
                Darren code - [標題]
            </div>
            <div class="step" data-x="500" data-y="0">
                This is slide 2
            </div>
            <div class="step" data-x="500" data-y="-400">
                This is slide 3
            </div>
            <div class="step" data-x="500" data-y="-800" data-scale="0.5">
                This is slide 4
            </div>
            <div class="step" data-x="0" data-y="-800" data-rotate="90">
                This is slide 5
            </div>
            <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>
            <!-- darren code -->
            <div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>
        </div>
        <script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
        <script>impress().init();</script>
    </body>
</html>
複製代碼 
<!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 class="fallback-message">
                <p>你的瀏覽器<b>不支持</b> impress.js, 因此當前展現的是簡化版。</p>
                <p>爲了得到更好的體驗，請使用最新的 <b>Chrome</b>, <b>Safari</b> 或者 <b>Firefox</b> 瀏覽器。</p>
            </div>
        </div>
        <div id="impress">
            <div class="step" data-x="0" data-y="0">
                Darren code - [標題]
            </div>
            <div class="step" data-x="500" data-y="0">
                This is slide 2
            </div>
            <div class="step" data-x="500" data-y="-400">
                This is slide 3
            </div>
            <div class="step" data-x="500" data-y="-800" data-scale="0.5">
                This is slide 4
            </div>
            <div class="step" data-x="0" data-y="-800" data-rotate="90">
                This is slide 5
            </div>
            <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>
            <!-- darren code -->
            <div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>
        </div>
        <script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
        <script>impress().init();</script>
    </body>
</html>
複製代碼

 

　　忽然想起一句話做爲文章總結吧：「當你有把錘子的時候,你看什麼都像釘子」。

 

轉http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程