61 lines
2.5 KiB
HTML
61 lines
2.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title>Cube | Explore impress.js in 3D | by Henrik Ingo @henrikingo</title>
|
||
|
|
<meta name="description" content="Explore impress.js in 3D" />
|
||
|
|
<meta name="author" content="Henrik Ingo" />
|
||
|
|
<link href="css/cube.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" data-transition-duration="2000">
|
||
|
|
|
||
|
|
<div class="step" data-x="0" data-y="0" data-z="350"
|
||
|
|
data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-4 step-3 step-2 step-5 overview">
|
||
|
|
<p>Slide one</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step" data-x="350" data-y="0" data-z="0" data-rotate-y="90"
|
||
|
|
data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-4 step-3 step-6 step-1 overview">
|
||
|
|
<p>Slide two</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step" data-x="0" data-y="350" data-z="0" data-rotate-x="-90" data-rotate-z="90"
|
||
|
|
data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-2 step-5 step-6 step-1 overview">
|
||
|
|
<p>Slide three</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step" data-x="0" data-y="-350" data-z="0" data-rotate-x="90" data-rotate-z="-90"
|
||
|
|
data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-5 step-2 step-6 step-1 overview">
|
||
|
|
<p>Slide four</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step" data-x="-350" data-y="0" data-z="0" data-rotate-y="-90" data-rotate-z="-180"
|
||
|
|
data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-3 step-4 step-6 step-1 overview">
|
||
|
|
<p>Slide five</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step" data-x="0" data-y="0" data-z="-350" data-rotate-y="-180" data-rotate-z="-180"
|
||
|
|
data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft o" data-goto-next-list="step-3 step-4 step-2 step-5 overview">
|
||
|
|
<p>Slide six</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="overview" class="step" data-x="700" data-y="-100" data-z="1000" data-scale="1" style="pointer-events: none;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="impress-toolbar"></div>
|
||
|
|
<div id="impress-help"></div>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../js/impress.js"></script>
|
||
|
|
<script>impress().init();</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|