impress.js 创建演示文档
2017-04-05 09:17
281 查看
概述
impress.js是一个基于CSS3和现代浏览器,受Prezi.com的启发而创作出来的前端多功能演示js框架,可以用它来替代PowerPoint制作更加酷炫的PPT,如果你是一位前端开发者或者勉强了解HTML和CSS,都能很快上手。这是一个官方Demo,效果不错吧。impress.js 是基于 webkit 浏览器(Chrome、Safari)开发,在其它基于非 webkit 引擎,但支持 CSS3 3D 的浏览器也能正常运行。
impress.js源码已经发布在GitHub上,地址:https://github.com/impress/impress.js
配置
引入impress.js文件并初始化
<script type="text/javascript" src="impress.js"></script> <script>impress().init();</script>
根结点
impress.js需要一个id为impress的根元素,演示文档的所有内容都包含在该元素中。
<div id="impress"></div>
步骤结点
步骤元素包含将在屏幕中呈现的内容,是演示文档的基本单元,相当于一张幻灯片,每个步骤元素包含名为step的class
<div class="step"> <q>这是第一张页面</q> </div>
在该元素中可以定义各种精彩呈现效果的属性,用来表示页面以怎样的方式出现到屏幕中央。
data-x = 幻灯片x坐标 data-y = 幻灯片y坐标 data-scale = 缩放比例 data-rotate = 平面旋转角度 data-rotate-x = x轴旋转角度(3D) data-rotate-y = y轴旋转角度(3D) data-rotate-z = z轴旋转角度(3D)
现在你已经了解了基本的动画属性,可以大胆发挥你的创意创建令人惊奇的幻灯片效果。
CSS class
future.future { display:none; }
该类添加在还未展示的步骤结点,当该元素被导航时会自动删除
future类,显示页面。
present
该类会被自动添加到目前位于屏幕中央的步骤结点,这对幻灯片展示时的动画效果非常有用。
.present .rotating { transform: rotate(-10deg); transition-delay: 0.25s; }
past
.past { display:none; }
该类会在步骤元素被导航过后自动添加。
active
该类会被自动添加到当前的步骤元素,与
presentclass类似
.step { opacity: 0.3; transition: opacity 1s; } .step.active { opacity: 1 }
impress-on-*
用于定义每个步骤结点的样式,步骤结点的id可以在URL中看到,如
#/step-1,例如:
.impress-on-overview .step { opacity: 1; cursor: pointer; } .impress-on-step-1, .impress-on-step-2, .impress-on-step-3 { background: LightBlue; }
JavaScript
impress([id])一个用于创建
ImpressAPI的工厂方法,可以自定义根结点,然后调用该方法进行初始化:
var impressAPI = impress( "root" );
impress().init()
初始化impress
next()
导航到下一页
var api = impress(); api.init(); api.next();
prev()
导航到上一页
var api = impress(); api.init(); api.prev();
goto( stepIndex | stepElementId | stepElement, [ duration ] )
导航到特定页面
var api = impress(); api.init(); api.goto(7); //Number ID api.goto( "overview" ); //String ID var overview = document.getElementById( "overview" ); api.goto( overview ); //HTMLElement
总结
impress.js可以让我们的演示文稿更有新意,结合CSS/JS动画,自己掌控视觉效果,比PowerPoint更加灵活精美,但是会复杂一些,如果想把演示文稿排版得更加好看,还是需要花费一定得时间和精力的。下面是一些Demo以及在线impress制作工具:
Imprezi
Strut - An HTML5 Presentation Editor
HTML5 Future : to infinity and beyond!
WordPress 201: Performance & Security
The Revolutionary CSS3: a non-technical intro to CSS3
相关文章推荐
- Python3Hovercraft创建impressive.js演示文档(一)
- js仿ppt,在线演示文档:Impress.js
- Python3 Hovercraft创建impressive.js演示文档(二)
- Python3 Hovercraft创建impressive.js演示文档(三)
- JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
- Three.js 中文文档和在线演示实例
- jquery.zSlide.js-基于CSS3/HTML5演示文档jQuery插件
- 本文演示如何创建和使用自动化操作从 Visual c + +.net 和 Microsoft 基础类 (MFC) Word 文档
- 跟大家分享点好东西:文档大全(120+),js在线演示
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第30讲_类和对象细节_创建对象的几种方式_js对象内存分析_学习笔记_源代码图解_PPT文档整理
- js创建文档碎片
- DOM操作HTML文档;js创建表格;清除空文本节点
- JS创建一个元素节点, 并把该节点添加为文档中指定节点的子节点
- jQuery+turn.js翻书、文档和杂志3种特效演示
- 超酷弦 web版PPT 基于impress.js 颠覆性在线演示应用
- 基于html5演示工具:impress.js
- 通过beego快速创建一个Restful风格API项目及API文档自动化 本文演示如何快速(一分钟内,不写一行代码)的根据数据库及表创建一个Restful风格的API项目,及提供便于在线测试API的界
- 离线电子演示文档,如何调用通过js访问SFDC数据
- JS性能优化之创建文档碎片(document.createDocumentFragment)
- impress.js 一个创建在线幻灯的js库