引入impress.js文件并初始化

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

根结点

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

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

结点

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

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

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

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

.future {
   display：none;
}

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

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

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

• past

.past {
   display：none;
}

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

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

.step {
  opacity: 0.3;
  transition: opacity 1s;
}
.step.active {
  opacity: 1
}

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

.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的工厂方法，可以自定义根结点，然后调用该方法进行初始化：

var impressAPI = impress( "root" );

• impress().init()
  初始化impress
• next()
  导航到下一页

var api = impress();
api.init();
api.next();

• prev()
  导航到上一页

var api = impress();
api.init();
api.prev();

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

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简要概述