impress.js

时间:2020-12-22 04:09:34

介绍一下

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

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

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

如果感兴趣请看作者源码