使用CSS 3D制作炫酷PPT——impress.js基础与应用 02-基础使用篇

王士江WangJohn
93 阅读6分钟

背景：由于本人是一名前端开发工程师，而且平时喜欢把收获到的开发知识和经验进行技术分享，于是就产生了直接使用前端技术进行在线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基础与应用 02-基础使用篇》的文章正文。

1、背景

在快速上手篇，我们掌握了使用impress.js的基本代码结构，接下来在本篇文章中，我们将详细学习impress.js的基础配置的使用——包括根元素(Root Element)和步骤元素(Step Element)的使用。

2、基础使用

2.1 根元素(Root Element)

这里的根元素(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…

一个根元素(Root Element)的配置示例（也就是我们在开篇的码上掘金案例）：

<div id="impress"
    data-transition-duration="1000"
    data-width="1024"
    data-height="768"
    data-max-scale="9"
    data-min-scale="0"
    data-perspective="1000"
    data-autoplay="1">

2.2 步骤元素(Step Element)

这里的步骤元素(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元素的缩放比例

一个步骤元素(Step Element)的配置示例：

<div id="bored" class="step" data-x="-1000">
    <q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
</div>

需要特别说明的是，我们可以为每个步骤元素(Step Element)分配一个唯一的ID，这个ID可以在URL中直接指向特定的步骤。比如我们在开篇的码上掘金案例，可以通过使用#/overview直接访问第一张幻灯片。在ID被省略的情况下，它将默认为#/step-N——这里N是步数。

接下来我们将从位置(data-x,data-y,data-z)、旋转(data-rotate)和缩放(data-scale)三个方面，学习和掌握步骤元素(Step Element)的配置和效果。

2.2.1 位置：data-x,data-y,data-z

我们使用data-x,data-y,data-z来设置步骤元素(Step Element)的位置。需要特别指出的是，我们这里设置的位置，是步骤元素(Step Element)的中心位置：

属性说明
data-x元素在x轴的位置坐标 (从左往右)
data-y元素在y轴的位置坐标 (从上往下)
data-z元素在z轴的位置坐标 (3D效果时使用, 控制各个元素前后的层次)
<div id="impress">
    <div id="slide1" class="step slide" data-x="0" data-y="500" data-scale="1" >
        <div><h2>Step 1</h2></div>
    </div>
    <div id="slide2" class="step slide" data-x="0" data-y="300" data-scale="2" >
        <div><h2>Step 2</h2></div>
    </div>
    <div id="slide3" class="step slide" data-x="0" data-scale="4" >
        <div><h2>Step 3</h2></div>
    </div>
</div>

如下图所示，当第一个步骤元素的data-x属性值比第二个步骤元素的data-x属性值小时，那么第二个步骤元素的就显示在第一个步骤元素的右侧，这样当从第一个步骤元素到第二个步骤元素进行转场时，第二个步骤元素就会以从右侧移入的方式入场。

位置.jpeg

2.2.2 旋转：data-rotate

我们使用data-rotate来设置步骤元素(Step Element)的旋转角度（总计360度）：

属性说明
data-rotate旋转角度 (如果没有则使用data-z)
data-rotate-x元素在x轴的旋转角度
data-rotate-y元素在y轴的旋转角度
data-rotate-z元素在z轴的旋转角度
<div id="impress">
    <div id="overview" class="step" data-x="-100" data-y="-400" data-scale="1" >
    </div>
    <div id="slide1" class="step slide" data-y="-400" data-z="-300"  data-rotate-x="90" >
        <div><h2>Slide 1</h2></div>
    </div>
    <div id="slide2" class="step slide" data-y="-200"  data-rotate-x="180" >
        <div><h2>Slide 2</h2></div>
    </div>
    <div id="slide3" class="step slide" data-y="-400" data-z="200"  data-rotate-x="270" >
        <div><h2>Slide 3</h2></div>
    </div>
    <div id="slide4" class="step slide" data-y="-600"  data-rotate-x="360" >
        <div><h2>Slide 4</h2></div>
    </div>
</div>

2.2.3 缩放：data-scale

我们使用data-scale来设置步骤元素(Step Element)的缩放比例：

属性说明
data-scale元素的缩放比例
<div id="impress">
    <div id="slide1" class="step slide" data-x="0" data-y="500" data-scale="1" >
        <div><h2>Step 1</h2></div>
    </div>
    <div id="slide2" class="step slide" data-x="0" data-y="300" data-scale="2" >
        <div><h2>Step 2</h2></div>
    </div>
    <div id="slide3" class="step slide" data-x="0" data-scale="6" >
        <div><h2>Step 3</h2></div>
    </div>
</div>

3、总结

通过以上步骤，我们能够实现impress.js的基础配置——重点是通过使用HTML数据属性(data)在每个步骤(Step)上设置效果：

  • 位置: 通过属性data-x, data-y, data-z设置步骤的位置；
  • 旋转: 通过属性data-rotate设置步骤的旋转角度；
  • 缩放: 通过属性data-scale设置步骤的缩放比例。

以上是我们使用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
文章
阅读
粉丝