logo标签列表

Prezi HTML5编辑器使用impress.js实现

javascriptflashhtmlwysiwygprezi
16

我最近得知，impress.js是Prezi的HTML5版本。这有助于我们摆脱专有的Flash技术，转而使用开放的Web标准，使其成为所有平台通用。

然而，使用HTML文本编辑器打代码（例如编写幻灯片的翻译、旋转和缩放值）是很烦人的。当代码变得冗长时，很难可视化演示文稿。

所以我刚刚创建了一个示例。在阅读下面的HTML代码时，很难确切地知道幻灯片在哪里以及它们将如何显示。

<div id="impress">
    <div class="step" data-x="0" data-y="0">
        Slide 1 at origin.
    </div>

    <div class="step" data-x="100" data-y="100" data-scale="0.5">
        Slide 2 has been moved south-eastern side and shrunk by half compared to slide 1.
    </div>

    <div class="step" data-x="-500" data-y="-405" data-rotate-x="50" data-rotate-y="-34" data-rotate-z="50" data-scale="2.5">
        Slide 3 has been rotated in 3D and is 2.5x larger than slide 1.
    </div>
</div>

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

这是一个JS Fiddle示例。

那么，有没有一款WYSIWYG HTML5 Prezi编辑器可供使用？我想要这样一个编辑器，因为它将使基于HTML5、CSS3和JavaScript创建演示文稿变得更加容易。

Prezi现在采用HTML5：https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135 - auroranil
6个回答
34

嘿，我最近开发了 Strut。它是一个专门为 ImpressJS 设计的演示文稿编辑器，目前处于 alpha 版本阶段，但已经有一个实时演示可以在这里查看： http://strut.io

Github 代码库: https://github.com/tantaman/Strut

这里有一个关于 Strut 的 YouTube 视频： http://www.youtube.com/watch?v=zA5s8wwme44&feature=share

你可以添加/删除幻灯片、插入图像和文本框、更改字体、保存演示文稿，并通过在 x、y 和 z 方向上移动幻灯片修改幻灯片之间的过渡效果。

非常好，我印象深刻！（无双关语）。不过，实时演示似乎已经离线了。 - t.mikael.d
tantaman.github.com/Strut很棒，在“概览”视图中编辑顶部视图。 - diyism
5

有几个适用于Impress.js的所见即所得编辑器，详见其GitHub问题跟踪器。

Strut和Impressionist似乎是最受推崇的。 Strut正在积极开发中（上次提交：昨天）。

未在其中讨论的是http://www.impressi.me/，该项目自2012年4月以来就已被放弃。它非常基础：您只能添加文本和转换效果。无法添加图像，也无法输入自定义字体大小。

3

有另一种创建impress.js演示文稿的方法，完全免费 - 可在www.jspres.com上获得。 用于创建演示文稿的模块是基于JavaScript的，但该项目包含服务器端，可以存储用户的演示文稿，并且他们可以从任何计算机访问它们。

这里有两个使用JSpres创建的演示文稿作为示例。 第一个只是该项目的推广，第二个是在我国全国IT奥林匹克竞赛中想象该项目的演示文稿（这就是它不是英语的原因，但您必须看到转换：P）

http://jspres.com/presentation/present/p:3

http://jspres.com/presentation/present/p:31

如果有人想查看并尝试它，但遇到了一些问题，我写了一个简单的指南，将帮助您了解基础知识，可以在这里找到：http://blog.jspres.com/2013/03/getting-started/

所以我将放一些屏幕来引起你的好奇心，看看这个项目。我希望你会喜欢它。

enter image description here enter image description hereenter image description hereenter image description hereenter image description here

这是一个非常棒的产品。我真的很喜欢它！你也应该试试它！！ :) - Bankin
2

或者，您可以使用Presenteer.js (http://willemmulder.github.com/Presenteer.js/)。它会简单地从一个HTML元素移动到下一个，并将其居中/缩放在视口中。您不需要数据元素，而只需使用CSS即可。

2
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接