介绍一下
impress.js是一个非常炫酷的幻灯片展示框架,依靠CSS3技术。
impress.js使用起来非常简单,下面就来简单介绍一下其用法。
Start
首先,当然要引入impress.js。
在div标签设置id为impress(不要求一定是div),然后在你想进行展示的地方加上calss:step,每一个step就相当于一张幻灯片。与.step同级通常会自己定义一个id,这个id主要用来在url中进行辨认序数,播放第几张的时候其id就会显示在url中,当然也可以直接用此锚点来访问指定的地方;如果没有定义,则默认为step-N(N为序数)。
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轴为中心旋转,通常用来制造3D效果
data-rotate-y:以y轴为中心旋转,通常用来制造3D效果
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
用法比较简单,过渡动画也比较流畅,最终效果很炫酷
作者建议在纸上构思好整个排版之后,在进行撸码哈~
如果感兴趣请看作者源码