16

我最近知道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>

一个 JS 小提琴示例。

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

4

6 回答 6

34

嘿，我最近制作了 Strut。它是一个仅适用于 ImpressJS 的演示编辑器，目前处于 alpha 阶段，但这里有一个现场演示：http: //strut.io

Github 仓库：https ://github.com/tantaman/Strut

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

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

于 2012-05-08T01:30:34.597 回答
5

Impress.js 有几个所见即所得的编辑器，在其 GitHub问题跟踪器上进行了讨论。

Strut和Impressionist似乎是最受赞誉的。Strut 开发得非常积极（最后一次提交：昨天）

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

于 2012-08-08T10:41:55.680 回答
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/

所以我会放一些屏幕来激起你对这个项目的一点好奇。我希望你会喜欢它。

在此处输入图像描述 在此处输入图像描述在此处输入图像描述在此处输入图像描述在此处输入图像描述

于 2013-06-13T14:02:57.227 回答
2

对于在线编辑幻灯片内容，有一个使用 Aloha Editor* 制作的第一个原型，可在http://lab.evo42.net/editable-impress.js/获得——尚无法添加或排列幻灯片...

*) http://aloha-editor.org

于 2012-03-07T00:57:39.620 回答
2

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

于 2012-04-02T10:50:30.743 回答
2

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

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

于 2012-07-02T15:55:00.697 回答