一、概述
impress.js是一个基于CSS3和现代浏览器,受Prezi.com的启发而创作出来的前端多功能演示js框架,可以用它来替代PowerPoint制作更加酷炫的PPT,如果你是一位前端开发者或者勉强了解HTML和CSS,都能很快上手。
impress.js也有一些缺点:编辑方式繁琐需要学习的东西较多,至少需要一些HTML和CSS的基础知识,其是想要获得一些特殊效果时,更需要了解一些javascript的使用,对于非开发者来讲存在一定门槛。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
该类会被自动添加到当前的步骤元素,与present
class类似
.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可以让演示文稿更有新意,较传统 ppt 更加灵活精美,但是会复杂一些,要把演示文稿排版得让人眼前一亮,还是需要花费一定得时间和精力的。
工具是为内容服务的,如果没有什么好的内容(要么是有质量,要么有意思),那么幻灯片做的再炫也毫无意义。
本文链接地址: impress简要概述