當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

發布時間：2023/12/9 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言：

　　如果你已經厭倦了使用PPT設置路徑、設置時間、設置動畫方式來制作動畫特效、那么Impress.js將是你一個非常好的選擇。

　　用它制作的PPT將更加直觀、效果也是嗷嗷美觀的。

　　當然，如果用它來裝X，是需要付出一些代價的，不過如果你是一個前端愛好者，理解HTML/CSS，那么就沒什么問題了。

　　看看網上的實例，動手練習練習，分分鐘就能上手了。

介紹：

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

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

演示：

官網展示效果：http://bartaz.github.io/impress.js/#/overview
本人制作的第一個示例：http://guyingsoft.com/gyPage/About/index.html

　　手機暫時可能看不了，因為它是使用方向鍵(←/→)或Tab鍵切換播放的。

　　從下面的下載地址即可下載Impress.js的源碼，里面附帶了官網的效果Demo。

　　如果需要上面我做的那個例子，留言郵箱就OK了。

準備：

Impress.js的源碼已經發布在了GitHub上，下載即可：https://github.com/bartaz/impress.js。

瀏覽器：Chrome、Safari、FireFox、IE10(有的人說不行，不知道為什么)。

代碼編輯器(在這里我用的是WebStorm)。

　　OK、一切準備就緒，開搞、

　　大家一步一步跟著寫，impress.js怎么用就會秒懂了。

步驟一：

新建一個HTML頁面，在</body>結束之前引入上面下載的impress.js

在<body>中創建兩個div：
第一個class為“impress-not-supported”，表示不支持是的提示信息，你懂的；
另一個的id為“impress”，表示幻燈片的容器。注意這里是id，我剛玩的時候就寫成了class，結果impress一直報錯找不到監聽等錯誤信息。

　　代碼如下：

1 <!DOCTYPE html> 2 <html> 3 <head lang="zh"> 4 <meta charset="UTF-8"> 5 <title>Impress.js Demo - 孤影</title> 6 </head> 7 <body> 8 <div class="impress-not-supported"></div> 9 10 <div id="impress"></div> 11 12 <script type="text/javascript" src="impress.js"></script> 13 </body> 14 </html>

步驟二：

　　現在我們就要來創建每一個切換的步驟了。

　　在id為impress的div中創建這些要切換的步驟的div即可，div的class為“step”。

　　div的id可有可無，如果沒有id，則會按照默認從上向下的step的順序一步步執行，訪問地址如：“http://.../demo.html#/step-1”。反之，將會按照你自定義的id順序執行。

　　每個幻燈片顯示的位置和大小、切換的效果等屬性如下：

data-x：幻燈片的X坐標
data-y：幻燈片的Y坐標
data-scale：幻燈片顯示的縮放比例
data-rotate：幻燈片旋轉的度數
data-rotate-x：為3D使用，這個度數設置它相對X軸旋轉多少度。
data-rotate-y：為3D使用，這個度數設置它相對Y軸旋轉多少度。
data-rotate-z：為3D使用，這個度數設置它性對Z軸旋轉多少度。

　　OK、了解了這些屬性之后，我們開始創建如下代碼，幻燈片內容在這里我就用歌詞了：

　　1.引用impress.js代碼之后，我們需要使用它來初始化頁面，產生后面我們將要制作的效果，代碼如下：

<1-- 引入impress.js -->
<script type="text/javascript" src="impress.js"></script> <script type="text/javascript">impress().init();　　// 初始化幻燈片的step </script>

　　2.創建第一個初始的幻燈片，他的data-x和data-y都設置為0，所以它會出現在頁面的中間：

<div class="step" data-x="0" data-y="0"> <h3>《Poker Face》</h3> - Lady Gaga </div>

　　3.我們創建第二個幻燈片，它的data-x為500，data-y依舊為0，所以切換到第二的時候，它會向右平移切換到這個幻燈片：

<div class="step" data-x="500" data-y="0"> I wanna hold them like they do in Texas Plays. </div>

　　4.下面創建第三個幻燈片，它的data-x依舊為500，data-y為-400，所以它會向上平移400px切換至此：

<div class="step" data-x="500" data-y="-400">Fold them let them hit me raise it Baby stay with me. </div>

　　4.平移的效果是不是感覺沒什么意思？下面我們第四張幻燈片來點兒花樣：

　　使用data-scale控制縮放的大小，在這里我設置為0.5，表示縮放為原大小的一半；data-x依舊500，data-y為-800。

　　表示向上移動400px，并且縮放一半的大小，代碼如下：

　　5.第五張幻燈片我們使用data-rotate屬性來設置它的旋轉動畫。

　　在這里，我設置當前的data-x為0、data-y依舊是-800，data-rotate為90。

　　表示，它將會安裝旋轉90°的動畫，想左翻轉500px，顯示當前幻燈片，代碼如下：

<div class="step" data-x="0" data-y="-800" data-rotate="90">Love game intuition play the cards with Spades to start. </div>

　　6.下面來點兒終極的，設置data-x為-1200，data-y為0，表示當前幻燈片相對于前一張向左1200px向下800px。

　　然后分別使用data-rotate-x、data-rotate-y、data-rotate-z設置旋轉角度，并且使用data-scale設置縮放比例為放大4倍。

　　代碼如下：

<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">And after he's been hooked I'll play the on that's on his heart. </div>

　　7.現在你已經可以打開瀏覽器運行代碼了，是不是感覺效果相當霸氣。

　　當然，界面可能有點丑，你可以按照個人喜好寫點樣式。如果懶得寫的話，也可以使用下面我簡單些的幾個樣式：

　　OK、通過以上7個小步驟，我們就已經完成了一張簡單粗暴的演示文稿了。

　　你也就可以發揮自己獨特的想象力來動手制作一個嚇尿一片人的Web演示文稿的展示效果了。

附注：

　　這里還有一個全局預覽的效果，就是把所有step塊的的內容全部放在一個平面顯示，效果超贊。

　　在這里，我在所有step后面創建一個id為overview的div，作為整體預覽的展示塊，展示縮放大小為放大3倍，x和y的位置如下等代碼如下：

結尾：

　　本實例所有代碼如下：

1 <!DOCTYPE html> 2 <html> 3 <head lang="zh"> 4 <meta charset="UTF-8"> 5 <title>Impress.js Demo - 孤影</title> 6 <style type="text/css"> 7 body{margin:0px; background:#000000; color:#00FF66; font-size: 20px;} 8 div.step h3{display: inline-block;} 9 div.step{width:400px; height: 100px; padding-top: 50px; text-align: center; border:1px solid #00FF66; box-shadow: 0px 0px 10px #00FF66; border-radius: 20px;} 10 div#overview{border:0px; box-shadow:0px 0px 0px transparent; } 11 </style> 12 </head> 13 <body> 14 <div class="impress-not-supported"></div> 15 16 <div id="impress"> 17 <div class="step" data-x="0" data-y="0"><h3>《Poker Face》</h3> - Lady Gaga</div> 18 <div class="step" data-x="500" data-y="0">I wanna hold them like they do in Texas Plays.</div> 19 <div class="step" data-x="500" data-y="-400">Fold them let them hit me raise it Baby stay with me..</div> 20 <div class="step" data-x="500" data-y="-800" data-scale="0.5">(I love it.)</div> 21 <div class="step" data-x="0" data-y="-800" data-rotate="90">Love game intuition play the cards with Spades to start.</div> 22 <div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4"> 23 And after he's been hooked I'll play the on that's on his heart. 24 </div> 25 <div class="step" id="overview" data-x="-200" data-y="-500" data-scale="3"></div> 26 </div> 27 28 <script type="text/javascript" src="impress.js"></script> 29 <script type="text/javascript"> 30 impress().init(); 31 </script> 32 </body> 33 </html> 本實例完整代碼

　　如果還需要再看看開頭我做的那個演示實例的話，留言郵箱吧。

　　當你制作出這么一個簡單的演示文稿后，你應該記住，使用它制作出的效果如何，你的想象和創造力是唯一決定性的因素！

體會：

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

　　優點：

個人非常喜歡overview的功能

因為HTML+CSS都需要自己完成，位置和效果都得自己經手，視覺效果都由自己掌控

在我用過的同類產品中視覺效果最絢，CSS3+3D效果，直接給觀眾看暈:)

　　缺點：

impress在視覺表現上確實非常強大，比起同樣做演示文稿的 html5slides 和 deck.js， impress.js的復雜度上高了不少，而且如果想把演示文稿排版的好看可能需要花掉大量的時間.

*如果閑impress麻煩的朋友可以去看看 html5slides 和 deck.js的資料，視覺效果會稍差一些，不過上手會簡單不少。

不要把3D和旋轉用得太花哨、太絢，看的人會暈，恰當就好哈

轉載于:https://www.cnblogs.com/geeksss/p/4338671.html

總結

以上是生活随笔為你收集整理的Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： UE4 编码规范
下一篇：配置FTP服务2（vsftpd 配置虚拟