1. 首页
  2. 问答
  3. Prezi HTML5 Editor via impress.js

Prezi HTML5 Editor via impress.js

2012-02-23 91 views
16

我最近知道impress.js已经创建为Prezi的HTML5版本。这有助于我们摆脱专有的Flash技术，而是使用一种开放的Web标准，它将在所有平台上普及。Prezi HTML5 Editor via impress.js

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

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

来源

2012-02-23 user824294

+0

Prezi现在是HTML5：https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135 – user824294 2015-09-12 05:14:59

回答

34

嘿，我最近做了支杆。它只是ImpressJS和演示文稿编辑器目前处于alpha，但有一个现场演示在这里： http://strut.io

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

，这里是一个YouTube的VID一下： http://www.youtube.com/watch?v=zA5s8wwme44&feature=share

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

来源

2012-05-08 01:30:34

+0

很不错，我印象深刻！ （没有PUN打算）。虽然现场演示似乎脱机。 – 2012-08-05 11:01:51

+0

tantaman.github.com/Strut非常棒，请在“概览”视图中编辑顶视图。 – diyism 2012-11-11 14:48:23

2

或者，你可以使用Presenteer.js（http://willemmulder.github.com/Presenteer.js/），它只需从一个HTML元素移动到下一个元素，然后居中/放大它在视口中。你不需要数据元素，但可以简单地使用CSS。

来源

2012-04-02 10:50:30

5

有几个所见即所得编辑器Impress.js，讨论on its GitHub问题跟踪。

Strut和Impressionist似乎是最受称赞的。支柱是非常积极的发展（最后承诺：昨天）

没有讨论有http://www.impressi.me/，似乎从2012年4月放弃。这也是非常基本的：你只能添加文本和转换。没有图像，不能输入自定义字体大小。

来源

2012-08-08 10:41:55

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

来源

2013-06-13 14:02:57 valkirilov

+0

这是一款很棒的产品。我真的很喜欢它！你也应该尝试一下吧！ :) – Bankin 2013-09-11 13:13:07

相关问题

 相关问题