Question

我最近知道impress.js已被创建为Prezi的HTML5版本。这有助于我们摆脱专有的Flash技术，转而使用对所有平台都具有普遍性的开放式网络标准。

但是，在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>

A JS Fiddle Example

那么我可以使用WYSIWYG HTML5 Prezi编辑器吗？我想要一个，因为它可以更容易地创建基于HTML5，CSS3和JavaScript的演示文稿。

Answer 1

嘿，我最近做了Strut。它是一个仅针对ImpressJS的演示编辑器，目前处于alpha版本，但这里有一个现场演示： http://strut.io

Github存储库：https://github.com/tantaman/Strut

这是关于它的youtube vid： http://www.youtube.com/watch?v=zA5s8wwme44&feature=share

您可以通过在x，y和＆amp ;;中移动幻灯片来添加/删除幻灯片，插入图像和文本框，更改字体，保存演示文稿以及修改幻灯片之间的过渡。 z方向。

Answer 2

Impress.js有几个WYSIWYG编辑器，讨论了on its GitHub问题跟踪器。

Strut和Impressionist似乎是最受好评的。 Strut非常积极地发展（最后提交：昨天）

没有讨论http://www.impressi.me/，它自2012年4月以来似乎已被废弃。它也非常基本：你只能添加文字和过渡。没有图像，无法输入自定义字体大小。

Answer 3

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

以JSpres为例进行了两次演示。第一个是项目的宣传，第二个是在我的国家想象这个国家IT奥林匹克项目的演示文稿（这是不是英文的原因，但你必须看到过渡：P）< / 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

Answer 4

对于内联幻灯片内容的编辑，我们可以在http://lab.evo42.net/editable-impress.js/处使用Aloha Editor *制作第一个原型 - 无法添加或排列幻灯片......

*）http://aloha-editor.org

Answer 5

或者，您可以使用Presenteer.js（http://willemmulder.github.com/Presenteer.js/），它只是从一个HTML元素移动到下一个HTML元素，并在视口中居中/缩放它。您不需要数据元素，但只能使用CSS。

Answer 6

我最近发布了一个工作impress.js editor原型，我专注于WYSIWYG在演示文稿中定位幻灯片。

您可以在github上跟踪进度或报告问题：https://github.com/naugtur/builder4impress

Prezi HTML5编辑器通过impress.js

6 个答案: