impress.js的可视化编辑

这只是源于某一天的突发奇想,如果用blockly封装一下impress.js,会不会很有趣呢!
演示地址:http://summerscar.me/impress-blockly/
Github托管:https://github.com/summerscar/impress-blockly

利用blockly包装impress.js

impress.js

官方简介

对于impress.js的官方描述:It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

官方示例

http://impress.github.io/impress.js/

使用

1
2
3
4
5
6
7
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>
It’s a <strong>presentation tool</strong> <br>
inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br>
and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.
</p>
</div>

impress的使用很简单在div中设置对应的class以及相关的data信息,impress就会对这些dom元素进行初始化确定位置,但是对于这整个过程还是需要对html有基本的了解,于是考虑如果用blockly套个壳会怎么样呢?

对impress的加工

blockly

blockly:简单地说就是把代码封装到积木块中,然后通过积木块的拼接生成代码并运行。

Demo运行说明

演示地址:http://summerscar.me/impress-blockly/

impress

主操作界面

右侧就是blockly的操作界面,通过拖入积木块,运行后在主界面自能直接看到效果,左下角能够修改背景色,同时提供了导入导出功能

impress

工作区内容的导出

impress

工作区内容的导入

运行时,默认是将这段代码直接保存在localstorage中,载入页面时自动加载本地的数据,有了导入导出可以方便创建多个不同工作区

最后

虽然实现还比较简陋,但功能基本都实现了,在简单了解了impress后就能后通过这个二次包装的impress很快捷的创建演示应用
另外还有个成熟的impress可视化编辑的产品:http://strut.io/