2012-02-23 87 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的演示文稿变得更容易。

+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方向移动幻灯片来修改幻灯片之间的转场。

+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。

5

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

StrutImpressionist似乎是最受称赞的。支柱是非常积极的发展(最后承诺:昨天)

没有讨论有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

+0

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