impress.js 创建演示文档

| | |

impress.js是一个基于CSS3和现代浏览器，受Prezi.com的启发而创作出来的前端多功能演示js框架，可以用它来替代PowerPoint制作更加酷炫的PPT，如果你是一位前端开发者或者勉强了解HTML和CSS，都能很快上手。

这是一个官方Demo，效果不错吧。

impress.js 是基于 webkit 浏览器（Chrome、Safari）开发，在其它基于非 webkit 引擎，但支持 CSS3 3D 的浏览器也能正常运行。

impress.js源码已经发布在GitHub上，地址：https://github.com/impress/impress.js

配置

引入impress.js文件并初始化

1
2
<script type="text/javascript" src="impress.js"></script>
<script>impress().init();</script>

根结点

impress.js需要一个id为impress的根元素，演示文档的所有内容都包含在该元素中。

1
<div id="impress"></div>

步骤结点

步骤元素包含将在屏幕中呈现的内容，是演示文档的基本单元，相当于一张幻灯片，每个步骤元素包含名为step的class

1
2
3
<div class="step">
    <q>这是第一张页面</q>
</div>

在该元素中可以定义各种精彩呈现效果的属性，用来表示页面以怎样的方式出现到屏幕中央。

1
2
3
4
5
6
7
data-x = 幻灯片x坐标
data-y = 幻灯片y坐标
data-scale = 缩放比例
data-rotate = 平面旋转角度
data-rotate-x = x轴旋转角度(3D)
data-rotate-y = y轴旋转角度(3D)
data-rotate-z = z轴旋转角度(3D)

现在你已经了解了基本的动画属性，可以大胆发挥你的创意创建令人惊奇的幻灯片效果。

CSS class

  • future
    1
    2
    3
    .future {
       display：none;
    }

该类添加在还未展示的步骤结点，当该元素被导航时会自动删除future类，显示页面。

  • present
    该类会被自动添加到目前位于屏幕中央的步骤结点，这对幻灯片展示时的动画效果非常有用。

    1
    2
    3
    4
    .present .rotating {
      transform: rotate(-10deg);
      transition-delay: 0.25s;
    }

  • past

    1
    2
    3
    .past {
       display：none;
    }

该类会在步骤元素被导航过后自动添加。

  • active
    该类会被自动添加到当前的步骤元素，与presentclass类似

    1
    2
    3
    4
    5
    6
    7
    .step {
      opacity: 0.3;
      transition: opacity 1s;
    }
    .step.active {
      opacity: 1
    }

  • impress-on-*
    用于定义每个步骤结点的样式，步骤结点的id可以在URL中看到，如#/step-1，例如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .impress-on-overview .step {
        opacity: 1;
        cursor: pointer;
    }
    .impress-on-step-1,
    .impress-on-step-2,
    .impress-on-step-3 {
      background: LightBlue;
    }

JavaScript

  • impress([id])
    一个用于创建ImpressAPI的工厂方法，可以自定义根结点，然后调用该方法进行初始化：

    1
    var impressAPI = impress( "root" );

  • impress().init()
    初始化impress

  • next()
    导航到下一页

    1
    2
    3
    var api = impress();
    api.init();
    api.next();

  • prev()
    导航到上一页

    1
    2
    3
    var api = impress();
    api.init();
    api.prev();

  • goto( stepIndex | stepElementId | stepElement, [ duration ] )
    导航到特定页面

1
2
3
4
5
6
7
var api = impress();
api.init();
api.goto(7);    //Number ID
api.goto( "overview" );     //String ID

var overview = document.getElementById( "overview" );
api.goto( overview );   //HTMLElement

总结

impress.js可以让我们的演示文稿更有新意，结合CSS/JS动画，自己掌控视觉效果，比PowerPoint更加灵活精美，但是会复杂一些，如果想把演示文稿排版得更加好看，还是需要花费一定得时间和精力的。

下面是一些Demo以及在线impress制作工具：
Imprezi
Strut - An HTML5 Presentation Editor
HTML5 Future : to infinity and beyond!
WordPress 201: Performance & Security
The Revolutionary CSS3: a non-technical intro to CSS3

本文为作者kMacro原创，转载请注明来源：https://zkhdev.github.io/2017/04/05/front-impressjs/