HTML5中的「縮放」，「平移」和「傾斜」類似於Prezi演示文稿

Question

我想製作類似於演示文稿的着陸頁，具有自動縮放傾斜和平移功能。你能指點我一些類似的東西，以便我能夠解決它嗎？

Answer 1

我知道對於及時回答有點太遲，但您可以嘗試Impress.js。

Answer 2

還有Strut這是一個用於編寫impress.js演示文稿的GUI。以下是演示視頻：http://www.youtube.com/watch?v=zA5s8wwme44

Answer 3

現在有Webpgr。這是一個類似Photoshop的在線編輯器，用於準確創建縮放平移和傾斜着陸頁。

Answer 4

有一個名爲impress.js（http://bartaz.github.io/impress.js/#/bored）的工具，非常酷，可以實現您想要的功能。

檢查頁面，你會發現這是一個演示本身（不要忘記看到源代碼，文檔在那裏）。

希望這可能會幫助你，任何事情請讓我知道。

Answer 5

如果你真的想要得到的Jiggy變焦，您應該偷窺：http://jaukia.github.io/zoomooz/這比impress.js爲reppin wayyy更多樂趣的Prezi

Answer 6

看一看layerJS，一個開放源碼庫，可以創建Prezi-like HMTL5網頁界面。您可以定義框架的鄰居，這些框架使觸摸和鼠標手勢能夠在框架之間轉換。如果您需要某些元素獨立移動，它甚至允許多個圖層。

這是超級簡單：只需添加一個階段格放一個或多個層中，當你想與你可以有變焦添加儘可能多的幀，平移和旋轉轉換。

通過使用與「畫布」不同的層佈局類型，Prezi不僅僅是像過渡一樣。只要看看documentation。

的HTML代碼應該是這樣的：

<div data-wl-type="stage"> 
    <div data-wl-type="layer" data-wl-layout-type="canvas"> 
    <div data-wl-type="frame" data-wl-name="frame1" data-wl-x="100" data-wl-width="1000" data-wl-rotation="45" ...> 
    </div> 
    <div data-wl-type="frame" data-wl-neighbors-l="frame1" ...> 
    </div> 
    </div> 
</div>