如何用impress.js写有逼格的ppt

Posted 馒头加梨子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用impress.js写有逼格的ppt相关的知识,希望对你有一定的参考价值。

概述

这是我学习课程impress让你的内容“舞”起来而做的总结和练手。

你可以点这里在线预览我做的ppt

注意:等加载完了之后,点击空格键翻页!

简化模板

下面是一个简化的模板

<!doctype html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>a mod of impress.js</title>
</head>
<body>
    <div id="impress">  
        <div class="fallback-message">
            Your browser doesn't support impress.js.  Try Chrome or Safari.
        </div>
        <div id="first" class="step" data-x="0" data-y="0" data-z="0" data-rotate="0" data-rotate-x="0" data-rotate-y="0" data-scale="0">
            <p>This is my first slide.  </p>
        </div>
    </div>
</body>
</html>

这是我简化后的模板,去除掉了一些css加载,js加载和注释的相关语句。

当然这个模板不能正常运行,但是可以很清楚的看出使用impress.js的相关语法

首先是head头部:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>a mod of impress.js</title>
</head>

按惯例添加元信息和标题,和一般的html文件一样。

然后是body部分:

    <div id="impress">

先建立一个id="impress"div,表示初始化它里面impress的相关语句;

    <div class="fallback-message">
            Your browser doesn't support impress.js.  Try Chrome or Safari.
    </div>

然后是class="fallback-message"也就是回调函数的div,表示如果浏览器不支持就返回这些信息:Your browser doesn‘t support impress.js. Try Chrome or Safari.

    <div id="first" class="step" data-x="0" data-y="0" data-z="0" data-rotate="0" data-rotate-x="0" data-rotate-y="0" data-scale="0">
            <p>This is my first slide.  </p>
    </div>

最后是id="first" class="step"div,表示这是一张幻灯片。

解释一下幻灯片语句里面的相关参数:

  • id="first"这张幻灯片的id,可以自定义,方便css文件中调。
  • class="step"表示这是一张幻灯片,必须写step
  • data-x表示这张幻灯片的x轴偏移量,yz也是同理。
  • data-rotate表示这张幻灯片的三围旋转量,xyz也是同理。
  • data-scale表示这张幻灯片的放大缩小量。

思考

其实impress.js使用起来非常简单,只要照个能用的模板,修改一下变量就会了。

我个人觉得,虽然impress.js在幻灯片的切换运动效果上非常有逼格和高大上,但是对于单张幻灯片的细枝末节却需要一点一点的写代码,非常麻烦,还不如用powerpoint。所以impress.js只适用于注重幻灯片的切换效果的场合,比如商业总结性报告,在线简历等。

以上是关于如何用impress.js写有逼格的ppt的主要内容,如果未能解决你的问题,请参考以下文章

数据挖掘工程师这么有逼格的职业到底是做啥的?

题解论逼格

[学习笔记]《零基础做出高逼格PPT》

JDK1.8新特性

近半年数据分析工作的总结----或者说所踩的坑的总结

Python的小数据存储,用什么格式更有逼格?