使用 impress.js 制作PPT

发表于 | 分类于 | 评论数： | 阅读次数：

impress.js,用写代码的方式来制作 PPT, 逼格极高.DEMO.

使用

##初始化

  • 创建一个 id 为 impress 的 div, 之后的所有文稿都会放在这个 div 里面.

  • 引入 impress.js 

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

创建幻灯片

每张幻灯片都放在 class 为 step 的 div 里面,同时也可以为这个 div 指定 id,如下:

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

创建以后将按照顺序播放.

参数

位置属性

impress.js 创建一个三维空间,每张幻灯片都有自己的位置(x,y,z).

data-x: x 轴坐标,向右越来越大;

data-y:y 轴坐标,向下越来越大;

data-z:z 轴坐标,向屏幕外越来越大

从第一张幻灯片开始,camera 会移到每个幻灯片的坐标处,产生变换的效果.

data-autoplay

自动播放的时间,如 data-auto-play=’10’ 代表在10s 后播放下一张幻灯片.

data-scale

放大的倍数,如 data-scale=’4’ 代表这个元素的大小是正常元素的四倍.

data-rorate

旋转的角度 ,如 data-rotate=’90’ 代表顺时针旋转90度, 角度为负则代表逆时针旋转指定度数.

data-rorate-x/data-rorate-y

相对于x,y 轴旋转的角度.

thank u !