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()到一个变量中,通过变量进行调用。)