Skip to content

Instantly share code, notes, and snippets.

@linmx0130

linmx0130/impressjs_test.html

Created January 26, 2014 04:10
Show Gist options
  • Save linmx0130/8628305 to your computer and use it in GitHub Desktop.
Save linmx0130/8628305 to your computer and use it in GitHub Desktop.
Download ZIP
a test page of impress.js
Raw
impressjs_test.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment