【譯】Impress.js製做酷炫Presentation PPT

時間 2019-12-04

標籤 impress.js impress 製做 presentation ppt 欄目 JavaScript 简体版

原文原文鏈接

能夠先看一個demo：http://dwqs.github.io/resumejavascript

昨天，我寫了一些關於Impress.js的東西，對於建立在線的自我展現，這是一個很是不錯的JavaScript庫。因爲是線上發佈，全部有部分人問我怎麼正確的使用它。由於沒有在實際的項目頁面設置幫助文檔。這一篇文章將幫助你開始建立一個簡單的幻燈片，可是以後你必定要完成它，能夠用它來作不少酷炫的效果，惟一限制你的就是你的創造力。html

需求java

爲了看到效果，請使用Google Chrome or Safari (or Firefox 10 or IE10).Impress.js目前並不兼容早期的Firefox or Internet Explorer版本。git

建立github

首先，要建立一個Web頁面。我建立的頁面以下：瀏覽器

<!doctype html> 
<html>     
<head>         
<title>Impress Tutorial</title>         
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     
</head>     
<body>    

</body> 
</html>

在</body>以前添加impress.js文件，將Impress.js導入到你的項目中ide

<script type="text/javascript" src="impress.js"></script>

接下來建立一個id是impress的div容器包裹這個幻燈片，ui

<div id=「impress」>

</div>

建立幻燈片url

在我的展現中，你將看到建立一個幻燈片是如此的簡單。每一個幻燈片是一個class爲step的div元素（被包裹在id是impress的容器內）code

(ps:div的id無關緊要，當有id時url中的hash變化是隨着id走；反之就是step-[num]，如)

<div class="step"> 
   My first slide 
</div>

建立幻燈片的同時，要添加一些數據屬性。下面是一些可用的數據屬性：

data-x = 幻燈片的x座標

data-y = 幻燈片的y座標

data-z = 幻燈片的z座標

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

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

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

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

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

讓數據屬性起做用

接下來的幻燈片設置將引導你理解每個數據屬性

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

<div class="step" data-x="0" data-y="0"> 
    This is my first slide （顯示的內容）
</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=「-2600″ data-y=「-800″ data-rotate-x=「30」

data-rotate-y=「-60″ data-rotate-z=「90」 data-scale=「4」>
This is slide 7 and it has a 3D transition AND a scale.
</div>

對於不支持Impress.js的瀏覽器作降級處理
在

div id=」impress」>以前添加以下一個div

<div class="no-support-message"> 
        Your browser doesn't support impress.js. Try Chrome or Safari. 
    </div>

而後將下列樣式添加到你的樣式表中：

.no-support-message { display:none; } 
.impress-not-supported .no-support-message { display:block; }

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

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

譯文出處：http://www.ido321.com/1513.html

相關標籤/搜索

每日一句

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