使用CSS 3D制作炫酷PPT——impress.js基础与应用 01-快速上手篇

王士江WangJohn
102 阅读5分钟

背景：由于本人是一名前端开发工程师，而且平时喜欢把收获到的开发知识和经验进行技术分享，于是就产生了直接使用前端技术进行在线PPT制作的想法。就这样、我发现了两个非常优秀的制作在线PPT的JS库——reveal.js和impress.js。 接下来我会分别以系列文章的形式进行reveal.js和impress.js的基础与应用分享，希望能帮到有同样需求的朋友。

本系列文章主要是介绍impress.js的基础和应用，而关于reveal.js的基础与应用，可以访问我之前写的reveal.js系列文章：

  1. 使用前端技术制作在线PPT：reveal.js基础与应用 01-快速上手篇
  2. 使用前端技术制作在线PPT：reveal.js基础与应用 02-定制样式篇
  3. 使用前端技术制作在线PPT：reveal.js基础与应用 03-插件应用篇

《使用CSS 3D制作炫酷PPT——impress.js基础与应用》会以系列文章的形式，有步骤、有重点地分享我使用impress.js实现在线PPT相关的知识和经验，目前该系列文章有如下3篇：

  1. 使用CSS 3D制作炫酷PPT——impress.js基础与应用 01-快速上手篇
  2. 使用CSS 3D制作炫酷PPT——impress.js基础与应用 02-基础使用篇
  3. 使用CSS 3D制作炫酷PPT——impress.js基础与应用 03-实现原理篇

以下是《使用CSS 3D制作炫酷PPT——impress.js基础与应用 01-快速上手篇》的文章正文。

1、背景

如果你尝试制作过PPT的话，不知道你有没有听说过Prezi？Prezi是一个制作缩放式PPT的在线平台，不同于普通PPT一页一页地平铺展示，它以令人印象深刻的可缩放转场变换动画，从而创建出更有视觉表现力的演示效果。

而我们接下来要用到的impress.js，则是基于CSS3的转换/过渡，通过三维空间布局和动态过渡效果，实现了类Prezi的可缩放PPT的，以下是我使用impress.js制作的一个PPT截图：

X6-LiteFlow-Workshop.gif

impress.js拥有以下核心功能：

  1. 三维空间布局
    • 支持 XYZ 轴定位
    • 可设置旋转（rotateX/Y/Z）
    • 支持缩放比例（scale）
  2. 非线性导航
    • 通过键盘方向键自由导航
    • 支持预设路径和自定义跳转
  3. 动态过渡
    • 自动计算元素间过渡动画
    • 支持 CSS3 过渡效果定制
  4. 响应式支持
    • 自适应不同屏幕尺寸
    • 移动端触控支持

2、快速上手

使用impress.js进行PPT的制作，基本结构包括以下三个部分，以我在码上掘金创建的案例为例：

2.1 HTML标记

impress.jsPPT的HTML标记层次是这样的——.impress > .step——一个step就是一页PPT：

<div id="impress"
    data-transition-duration="300"
    data-width="1024"
    data-height="768"
    data-max-scale="9"
    data-min-scale="0"
    data-perspective="1000"
    data-autoplay="1"
>
    <!-- 初始视图 --> 
    <div class="step" data-x="0" data-y="0"> 
        <h1>Welcome to Impress.js</h1> 
    </div> 
    <!-- 右移视图 --> 
    <div class="step" data-x="1200" data-y="0" data-rotate="90"> 
        <h2>Second Slide</h2> 
        <p>Rotated 90 degrees</p> 
    </div> 
    <!-- 三维变换 --> 
    <div class="step" data-x="0" data-y="-800" data-z="-1000" data-scale="2"> 
        <h2>Zoomed View</h2> 
        <p>2x scale effect</p> 
    </div> 
</div>
  1. 根元素(Root Element)：id为impress的div，是impress.js的根元素，我们会把所有PPT都放在这里，在这里我们使用 data 属性进行一些参数配置，以下是可配置属性：
属性默认值说明
data-transition-duration1000 (ms)转场动画时间间隔。
data-width1920 (px)目标屏幕宽度。
data-height1080 (px)目标屏幕高度。
data-max-scale3最大缩放比例。
data-min-scale0最小缩放比例。
data-perspective10003D透视developer.mozilla.org/en/CSS/pers…
  1. 步骤元素(Step Element)：class为step的div，是impress.js的一页PPT步骤元素，在这里我们使用 data 属性控制元素位置，以下是可配置属性：
属性说明
data-x元素在x轴的位置坐标 (从左往右)
data-y元素在y轴的位置坐标 (从上往下)
data-z元素在z轴的位置坐标 (3D效果时使用, 控制各个元素前后的层次)
data-rotate旋转角度 (如果没有则使用data-z)
data-rotate-x元素在x轴的旋转角度
data-rotate-y元素在y轴的旋转角度
data-rotate-z元素在z轴的旋转角度
data-scale元素的缩放比例

2.2 CSS样式

通过import引入impress.js相关的CSS文件。

import 'impress.js@1.1.0/css/impress-common.css';
import 'impress.js@1.1.0/css/impress-demo.css';

2.3 JavaScript脚本

通过创建一个impress的实例、调用init方法进行PPT的初始化：

import 'impress.js@1.1.0';
var ppt = impress(); // 1. 生成PPT实例
ppt.init(); // 2. 初始化PPT
// 3. 添加键盘事件
document.addEventListener('keypress', function (event) {
    if (
        event.keyCode === 13 ||
        event.code === 'Enter' ||
        event.keyCode === 27 ||
        event.code === 'Escape'
    ) {
        ppt.goto('overview');
    }
});

通过以上三步，我们就能完成了impress.js的基本使用，接下来我们可以像平时写HTML代码一样、向PPT里面添加内容。

3、总结

通过以上步骤，我们能够实现快速上手impress.js——通过使用HTML标签制作PPT：

  1. 通过引入impress.js的HTML标记、CSS样式、JS脚本，完成一个PPT项目的初始化；
  2. 通过在impress.js的.impress > .step层级中，通过添加step来添加新的PPT幻灯片页面。

以上是我们使用impress.js进行PPT制作的基本结构，接下来我们还会通过系列文章对impress.js进行进一步的研究和学习：

  1. 使用CSS 3D制作炫酷PPT——impress.js基础与应用 01-快速上手篇
  2. 使用CSS 3D制作炫酷PPT——impress.js基础与应用 02-基础使用篇
  3. 使用CSS 3D制作炫酷PPT——impress.js基础与应用 03-实现原理篇
avatar
文章
阅读
粉丝