用impress.js製做幻燈片

時間 2019-12-06

標籤 impress.js impress 製做幻燈片欄目 JavaScript 简体版

原文原文鏈接

前兩天學長回學校進行洗腦宣講，作了一個看上去很炫的縮放式幻燈片。我不知道是否是太淺薄了，找了好久才找到幾個Web幻燈片工具。看了幾個以後，我決定學習一下其中最Geek的impress.js。
impress.js是一款新興的幻燈工具，它的效果相似Prezi，可是擁有3D的功能，並且是在MIT&GPL協議下開源，對於有必定的Web開發基礎的人而言，真是一個福音！只須要簡單的用一些html指令，並加載impress.js就能夠製做出一個很絢麗的縮放式幻燈。

製做時首先你須要寫一些head，這和普通的Web是同樣的，但body不一樣。因爲目前impress.js只支持Chrome、Firefox和Safari這樣的現代瀏覽器（摸摸IE……），因此須要一個fallback message。css

<body class="impress-not-supported">
<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

而後開始寫真正的主體，impress部分。這部分必須徹底被框在「\ < div id="impress"\ >」之中。
第一中幻燈片是step slide，這個和普通的幻燈片很像，就是一頁一頁的。能夠用以下的方法添加html

<div id="page1" class="step slide" data-x="-1000" data-y="-1500">
    <q>第一頁的幻燈片</q>
</div>

你須要寫的是id、data-x和data-y。id就是一個名稱，而data-x、data-y則是座標。事實上impress.js是給你了一個很大場地佈景，而你須要的就是把一張張幻燈片扔進去，放到恰當的位置。而後它會按照你扔的順序進行展現。其實座標還有一個，是data-z，這個座標能夠把你帶入3D效果之中，進行縮放。
另外一種幻燈就叫作step，不像前一種有個死板的框，這種幻燈片完全去掉了限制你的框，而是直接的寫在背景上。請看下面這個例子：git

<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
    <span>你看到的幻燈片由</span>
    <h1>impress.js</h1>
    <span>給你呈現</span>
</div>

這裏特別的是有一個data-scale，表示這個幻燈片的大小，你能夠把一頁作得很是大或者很是小，來提供一個縮放的反差。還有一個旋轉功能：github

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
    <p>這是一個 <strong>presentation tool</strong> <br/>
    做者從 <a href="http://prezi.com">prezi.com</a> 獲得靈感<br/>
    利用現代瀏覽器<strong>CSS3 transforms and transitions</strong>的力量</p>
</div>

上面的data-rotate就是表示旋轉的角度。
最後，你能夠提供一個hint，告訴用戶須要使用鍵盤的方向鍵來控制整個播放過程。若是用戶剛點開幻燈片而沒反應，這個提示會自動浮現。web

<div class="hint">
    <p>請用方向鍵控制</p>
</div>

在頁面的最後，你須要加載impress.js，我這裏是直接引用做者的頁面，但若是是離線的展現，建議下載下來使用。僅僅加載js是不夠的，還須要用impress().init()來啓動。segmentfault

<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>

事實上這個工具功能還有不少，我只是學了一些最基本的功能。官網的建議是直接看他提供的index.html，裏面有詳細的註釋告訴你有什麼功能，我作了一個頁面，也是從做者提供的index.html改出來的。雖然這些東西很簡單，但作一個演講使用的幻燈片，也已經足夠好了。我作的頁面放在Gist上，總體代碼見本頁最後。
固然相似的工具不能不提Prezi，它是這個創意的最初實現，不過聽說不支持中文。國內騰訊AlloyTeam也開發了一個叫作iPresst的工具，能夠說是傻瓜級的好東西，不過因爲是社交網絡式的，有點不夠隱私。impress.js最大的缺陷就是太Geek了，若是可以有個所見即所得的開發工具，必定可以推廣開來。api

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>impress.js 嘗試</title>

     <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
    <link href="http://bartaz.github.io/impress.js/css/impress-demo.css" rel="stylesheet" />

</head>
<body class="impress-not-supported">


<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>




<div id="impress">
    <div id="page1" class="step slide" data-x="-1000" data-y="-1500">
        <q>第一頁的幻燈片：<br/>是否嘗試過這樣<b>幻燈</b>？</q>
        <q>這種幻燈片最初由Prezi帶給世界</q>
    </div>
    
    <div class="step slide" data-x="0" data-y="-1500">
        <q>這種幻燈片經過ZUI的方式，完全擺脫了傳統幻燈片的「盒子限制」</q>
        <q><strong>惟一限制你的是你的創意！</strong></q>
    </div>

    <div class="step slide" data-x="1000" data-y="-1500">
        <q>後面還有<font color="red"><strong>更多驚喜！</strong></font></q>
    </div>
    
    <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
        <span>你看到的幻燈片由</span>
        <h1>impress.js</h1>
        <span>給你呈現</span>
    </div>
    
    <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
        <p>這是一個 <strong>presentation tool</strong> <br/>
        做者從 <a href="http://prezi.com">prezi.com</a> 獲得靈感<br/>
        利用現代瀏覽器<strong>CSS3 transforms and transitions</strong>的力量</p>
    </div>

    <div id="big" class="step" data-x="4000" data-y="2100" data-rotate="180" data-scale="6">
        <p>將你的想法視覺化</p>
    </div>
    
    <div id="end" class="step" data-x="7000" data-y="2500" data-rotate="90" data-scale="6">
        <p>請看<a href="http://bartaz.github.io/impress.js"><b>impress.js</b></a>
        <br/>
        開放的幻燈工具</p>
    </div>
    <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
    </div>

</div>




<div class="hint">
    <p>請用方向鍵控制</p>
</div>




<script>
if ("ontouchstart" in document.documentElement) { 
    document.querySelector(".hint").innerHTML = "<p>請用方向鍵控制</p>";
}
</script>


<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。