impress.js学习笔记


偶然间发现impress.js这款做ppt神器,大一时候看到炫酷技术又澎湃的心情又燃起。于是乎,学习下。

impress.js貌似没有什么文档,只有在demo页面中的注释哩写满了how rto use。所以这次翻译便是翻译部分index.html吧。

impress版本:0.5.3

引入impress.js在页面底部。然后执行impress().init();

你想要知道怎么样使用impress.js? 第一步,也是很重要的一步,你需要阅读源码。它说明了impress.js是怎么样使用html与css构建特效的。 你必须具备一定得html与css基础才能够有效的使用impress.js。更加重要的是你必须能够设计出页面。impress.js没有任何样式。一切都需要你自己动手设计。

impress.js不依赖任何额外的样式。js增加所有展示样式。可在基础之上自定义样式

impress.js用body标签去设置一些有用的样式名字。用来设置浏览器不支持css3效果时候的样式。 第一个有用的样式名字:imress-not-supported。当然浏览器不支持css3特性时候,将会采用这个样式。如果impress.js知道浏览器支持css3,那么将会移除imress-not-supported

核心元素是id="impress"。这个元素不必是个div,所有效果将在ipress内部执行。所有配置都在元素上进行。每一张ppt都需要加样式名字:step。所有样式变化都以为视点中心为中心。

样式step元素的id名字不是必须的,它用来去定义url,如果缺少id,则你热保温ustep-N,url为#/step-22。但是id="step-2"虽然可以用但是不推荐。但是如果一个场景定义id,当播放这个场景时候,则body的样式则为class="impress-on-id"。比如第一个场景的id为"first",则当播放第一个ppt时候body的样式为class='impress-on-first'。

每个场景都是正常状态,添加的旋转、缩放都是指ppt切换时候的动画。所以将会有三个状态:过去(past)、现在(present)、将来(future)。只有一个元素是当前样式present

data-transition-duration="2000"鸟事动画执行时间为2s。 data-perspective=="500"用来设置perspective。 data-scale="4"表示元素放大四倍。 data-rotate="90"表示元素将会顺时针旋转90度。 data-x/y/z表示x/y/z的偏移。

impress()提供了所有api,比如impress().init(),impress().next(),impress().prev(),impress().goto(idx|id|element,[动画时间])(每次调用impress()不会初始化,更适合的办法是保存impress()到一个变量中,通过变量进行调用。)

Written on February 27, 2015