用impress.js制做幻灯片

时间 2019-12-06 标签 impress.js impress 制做幻灯片

前两天学长回学校进行洗脑宣讲，作了一个看上去很炫的缩放式幻灯片。我不知道是否是太浅薄了，找了好久才找到几个Web幻灯片工具。看了几个以后，我决定学习一下其中最Geek的impress.js。
impress.js是一款新兴的幻灯工具，它的效果相似Prezi，可是拥有3D的功能，并且是在MIT&GPL协议下开源，对于有必定的Web开发基础的人而言，真是一个福音！只须要简单的用一些html指令，并加载impress.js就能够制做出一个很绚丽的缩放式幻灯。

制做时首先你须要写一些head，这和普通的Web是同样的，但body不一样。因为目前impress.js只支持Chrome、Firefox和Safari这样的现代浏览器（摸摸IE……），因此须要一个fallback message。css

<body class="impress-not-supported">
<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

而后开始写真正的主体，impress部分。这部分必须彻底被框在“\ < div id="impress"\ >”之中。
第一中幻灯片是step slide，这个和普通的幻灯片很像，就是一页一页的。能够用以下的方法添加html

<div id="page1" class="step slide" data-x="-1000" data-y="-1500">
    <q>第一页的幻灯片</q>
</div>

你须要写的是id、data-x和data-y。id就是一个名称，而data-x、data-y则是坐标。事实上impress.js是给你了一个很大场地布景，而你须要的就是把一张张幻灯片扔进去，放到恰当的位置。而后它会按照你扔的顺序进行展现。其实坐标还有一个，是data-z，这个坐标能够把你带入3D效果之中，进行缩放。
另外一种幻灯就叫作step，不像前一种有个死板的框，这种幻灯片完全去掉了限制你的框，而是直接的写在背景上。请看下面这个例子：git

<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
    <span>你看到的幻灯片由</span>
    <h1>impress.js</h1>
    <span>给你呈现</span>
</div>

这里特别的是有一个data-scale，表示这个幻灯片的大小，你能够把一页作得很是大或者很是小，来提供一个缩放的反差。还有一个旋转功能：github

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
    <p>这是一个 <strong>presentation tool</strong> <br/>
    做者从 <a href="http://prezi.com">prezi.com</a> 获得灵感<br/>
    利用现代浏览器<strong>CSS3 transforms and transitions</strong>的力量</p>
</div>

上面的data-rotate就是表示旋转的角度。
最后，你能够提供一个hint，告诉用户须要使用键盘的方向键来控制整个播放过程。若是用户刚点开幻灯片而没反应，这个提示会自动浮现。web

<div class="hint">
    <p>请用方向键控制</p>
</div>

在页面的最后，你须要加载impress.js，我这里是直接引用做者的页面，但若是是离线的展现，建议下载下来使用。仅仅加载js是不够的，还须要用impress().init()来启动。segmentfault

<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>

事实上这个工具功能还有不少，我只是学了一些最基本的功能。官网的建议是直接看他提供的index.html，里面有详细的注释告诉你有什么功能，我作了一个页面，也是从做者提供的index.html改出来的。虽然这些东西很简单，但作一个演讲使用的幻灯片，也已经足够好了。我作的页面放在Gist上，总体代码见本页最后。
固然相似的工具不能不提Prezi，它是这个创意的最初实现，不过听说不支持中文。国内腾讯AlloyTeam也开发了一个叫作iPresst的工具，能够说是傻瓜级的好东西，不过因为是社交网络式的，有点不够隐私。impress.js最大的缺陷就是太Geek了，若是可以有个所见即所得的开发工具，必定可以推广开来。api

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>impress.js 尝试</title>

     <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
    <link href="http://bartaz.github.io/impress.js/css/impress-demo.css" rel="stylesheet" />

</head>
<body class="impress-not-supported">


<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>




<div id="impress">
    <div id="page1" class="step slide" data-x="-1000" data-y="-1500">
        <q>第一页的幻灯片：<br/>是否尝试过这样<b>幻灯</b>？</q>
        <q>这种幻灯片最初由Prezi带给世界</q>
    </div>
    
    <div class="step slide" data-x="0" data-y="-1500">
        <q>这种幻灯片经过ZUI的方式，完全摆脱了传统幻灯片的“盒子限制”</q>
        <q><strong>惟一限制你的是你的创意！</strong></q>
    </div>

    <div class="step slide" data-x="1000" data-y="-1500">
        <q>后面还有<font color="red"><strong>更多惊喜！</strong></font></q>
    </div>
    
    <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
        <span>你看到的幻灯片由</span>
        <h1>impress.js</h1>
        <span>给你呈现</span>
    </div>
    
    <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
        <p>这是一个 <strong>presentation tool</strong> <br/>
        做者从 <a href="http://prezi.com">prezi.com</a> 获得灵感<br/>
        利用现代浏览器<strong>CSS3 transforms and transitions</strong>的力量</p>
    </div>

    <div id="big" class="step" data-x="4000" data-y="2100" data-rotate="180" data-scale="6">
        <p>将你的想法视觉化</p>
    </div>
    
    <div id="end" class="step" data-x="7000" data-y="2500" data-rotate="90" data-scale="6">
        <p>请看<a href="http://bartaz.github.io/impress.js"><b>impress.js</b></a>
        <br/>
        开放的幻灯工具</p>
    </div>
    <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
    </div>

</div>




<div class="hint">
    <p>请用方向键控制</p>
</div>




<script>
if ("ontouchstart" in document.documentElement) { 
    document.querySelector(".hint").innerHTML = "<p>请用方向键控制</p>";
}
</script>


<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>