impress.js

impress.js

介绍一下

impress.js是一个非常炫酷的幻灯片展示框架，依靠CSS技术。

impress.js使用起来非常简单，下面就来简单介绍一下其用法。

Start

首先，当然要引入impress.js。

在div标签设置id为impress（不要求一定是div），然后在你想进行展示的地方加上calss：step，每一个step就相当于一张幻灯片。与.step同级通常会自己定义一个id，这个id主要用来在url中进行辨认序数，播放第几张的时候其id就会显示在url中，当然也可以直接用此锚点来访问指定的地方；如果没有定义，则默认为step-（为序数）。

fallback

如果用户的浏览器不支持这么炫酷的特效，框架会自动展示class为fallback-message中的内容，做个兼容。

一些属性

在.step的同级定义一些属性：

中心点：整个元素的中心点

data-x：距中心点x轴的坐标

data-y：距中心点y轴的坐标

data-z：相当于垂直于屏幕的距离

data-transition-duration：动画切换持续的时间，默认为1s

data-perspective：视距，默认为1000，不太了解视距的可以自行学习下

data-rotate：顺时针旋转的度数

data-rotate-x：以x轴为中心旋转，通常用来制造D效果

data-rotate-y：以y轴为中心旋转，通常用来制造D效果

data-rotate-z：等同于data-rotate

三种状态

impress.js提供三种状态，分别是未展示（future），展示中（present），已展示（past）

这几个状态会作为class添加在元素上，方便使用者根据自己需求进行操作

事件

impress().init()：初始化（必须）

impress().next()：过渡到下一个展示的元素

impress().prev()：过渡到前一个展示的元素

impress().goto(Index | Id | El, [duration])：过渡到指定的元素（序数 | Id | 元素，过渡时间）

Last

用法比较简单，过渡动画也比较流畅，最终效果很炫酷

作者建议在纸上构思好整个排版之后，在进行码哈～

如果感兴趣请看作者源码