HTML5 中的“缩放”、“平移”和“倾斜”，类似于 Prezi 演示文稿答案

【问题标题】："Zoom", "pan" and "tilt" in HTML5 similar to a Prezi presentationHTML5 中的“缩放”、“平移”和“倾斜”，类似于 Prezi 演示文稿
【发布时间】：2012-09-03 12:08:51
【问题描述】：

我想制作一个类似于 Prezi 演示文稿的着陆页，具有自动缩放倾斜和平移功能。你能给我指点类似的东西吗？

【问题讨论】：

标签： html prezi

【解决方案1】：

如果你真的想用缩放来摇摆不定，你应该偷看：http://jaukia.github.io/zoomooz/ 这比 impress.js 更有趣，因为 repin' the Prezi

【讨论】：

【解决方案2】：

还有Strut，它是一个用于创作 impress.js 演示文稿的 GUI。这是一个演示视频：http://www.youtube.com/watch?v=zA5s8wwme44

【讨论】：

【解决方案3】：

看看layerJS，一个可以创建Prezi-like HMTL5 Web 界面的开源库。您可以定义帧的neighborship，使触摸和鼠标手势能够在帧之间转换。如果您需要一些元素相互独立移动，它甚至允许多层。

超级简单：只需添加一个stage div，放入一个或多个图层，然后在您之间添加任意数量的frame具有缩放、平移和旋转过渡。

通过使用与“画布”不同的图层布局类型，不仅有类似 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>

【讨论】：

【解决方案4】：

我知道及时回复有点晚了，但你可以试试Impress.js。

【讨论】：

【解决方案5】：

现在有Webpgr。这是一个类似 Photoshop 的在线编辑器，用于精确地创建缩放平移和倾斜着陆页。

【讨论】：

【解决方案6】：

有一个名为 impress.js (http://bartaz.github.io/impress.js/#/bored) 的工具非常酷，可以实现您想要的。

查看页面，您会看到它本身就是一个演示（不要忘记查看源代码，文档在那里）。

希望对你有帮助，有什么请告诉我。

【讨论】：