简介
impress 是一个基于 HTML5/CSS3 技术的幻灯片库，由 Bartek Szopka 基于 CSS3 变形效果制作，通过 JavaScript 实现幻灯片切换效果的插件。impress 在无需 Flash 或其他插件情况下，提供了非常流畅自然的幻灯片效果。同时，通过各种自定义配置以及扩展插件，impress 可以实现丰富多样的幻灯片效果。
安装 impress
impress 使用 npm 进行包管理，因此需要先在本地安装 Node.js 和 npm。
创建 npm 项目
首先需要在本地创建一个 npm 项目，可以在终端中输入以下指令进行创建：
npm init
根据提示完成项目相关的信息和配置。
安装 impress
打开终端，输入如下指令可以在 npm 项目中安装 impress：
npm install impress --save
这里使用 --save 参数来将 impress 添加到项目的依赖列表中，并安装到 node_modules 文件夹中。
使用 impress
安装完成后，就可以在项目中使用 impress 创建幻灯片效果了。
创建 HTML
这里以一个简单的实例来进行演示，首先需要新建一个 HTML 文件，将 impress 和导入到 HTML 中。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ------ ---------------- --------------- ------------ -------- ------ - --------------- ------ ---------- ----------- ---------- -- ----------- -- -------------------- -------- --- --------- ------ ---------------- ---------------------------------------------------------------------------- ------- ------ ----- ------------- ----- ---------- ------------ ---------- ----------- ---------- ------ ------- ----- ------------ ------------ ---------- --------------- ---------- ------ ------- ----- ------------ -------------- ------------- ---------- ------ ------- ------- - -------- ---------------------------------------------------------------------------------- --------- ------------------- ---------- ------- -------
这里使用 CDN 来导入 impress.css 和 impress.js，可以简化项目的配置和部署，同时也可以保证最新的版本。
impress 配置
impress 的配置由 HTML 标签的 data-* 属性来控制，这里列举一些常用的配置属性：
- data-x: 该幻灯片在水平方向上的偏移距离。
- data-y: 该幻灯片在垂直方向上的偏移距离。
- data-z: 该幻灯片在垂直方向上的偏移距离（不同于 data-y，这是一个正交方向，意味着在“下面”或“上面”呈现不同的页面）。
- data-rotate: 该幻灯片相对于其初始旋转角度的旋转角度（以弧度为单位）。
- data-scale: 该幻灯片相对于其初始大小的缩放比例。
以上属性可在 HTML 标签中进行定义，例如定义 data-x="750" data-y="0" 表示该幻灯片在水平方向上的偏移距离为 750 像素，而在垂直方向上的偏移距离为 0 像素。
impress 方法
impress 提供了一些实用的 JavaScript 方法，通过这些方法可以实现更加自定义的幻灯片效果。以下列举一些常用的 impress 方法：
impress().init()
初始化 impress，使幻灯片的效果生效。该方法需要在页面加载完成之后执行。
impress().init();
impress().goto()
切换到指定 id 或 HTML 元素。impres会将页面平滑地转换到新的位置，同时还可以通过第三个参数来指定跳转动画的时间。
impress().goto( 'demo', 5000 );
impress().prev()
切换到上一个幻灯片。
impress().prev();
impress().next()
切换到下一个幻灯片。
impress().next();
总结
impress 是一个非常实用的 HTML5/CSS3 幻灯片库，可以实现非常流畅自然的幻灯片效果。通过本文的介绍，我们了解了 impress 的安装和使用方法，以及常用配置和 JavaScript 方法，相信对于前端开发者来说，impress 会成为一个非常实用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76941