90 lines
3.8 KiB
HTML
90 lines
3.8 KiB
HTML
|
<!doctype html>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
This is a simple example / template impress.js slide show. The goal is to be
|
||
|
|
easier to read for a first timer than the official and very feature rich
|
||
|
|
demo by bartaz (http://bartaz.github.io/impress.js/). It's also a very
|
||
|
|
traditional presentation that looks like slides (square screens with bullet
|
||
|
|
points...), again to make a first timer feel more at home. From this simple
|
||
|
|
presentation you can then go on to more powerful impress.js presentations!
|
||
|
|
|
||
|
|
This example is hopefully helpful for people that want to create both
|
||
|
|
simple and (eventually) awesome presentations in impress.js and comfortable
|
||
|
|
doing that directly in HTML.
|
||
|
|
|
||
|
|
By: @henrikingo (Still based on the HTML from bartaz' demo.)
|
||
|
|
|
||
|
|
-->
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title>A Study in 3D Rotations| by Henrik Ingo @henrikingo</title>
|
||
|
|
<meta name="description" content="Explore impress.js in 3D" />
|
||
|
|
<meta name="author" content="Henrik Ingo" />
|
||
|
|
<link href="css/3D-rotations.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 id="overview" class="step overview" data-x="1350" data-y="100" data-z="100" data-scale="3" data-rotate-y="90">
|
||
|
|
<h1>A Study in 3D Rotations</h1>
|
||
|
|
</div>
|
||
|
|
<div id="overview2" class="step overview" data-x="2018" data-y="106" data-z="3018" data-scale="2">
|
||
|
|
<p>Unlike the <code>x/y/z</code> coordinates (aka translations), the <code>rotate-x/y/z</code> rotations are applied in a
|
||
|
|
specific order, and order matters. This demo presentation exhibits the use of the new <code>data-rotate- order</code> attribute.
|
||
|
|
Instead of the default "xyz" order, the steps use the reversed <em>"zyx"</em> order in applying rotations around each axis.
|
||
|
|
Some of the steps (<a href="#step-3">3</a> & <a href="#step-7">7</a>), are in positions that are not possible with the default "xyz" order.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="step-1" class="step" data-x="0" data-y="0" data-z="0"
|
||
|
|
data-goto-prev="step-8">
|
||
|
|
<p>Slide one</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="step-2" class="step" data-x="420" data-y="-70" data-z="-250" data-rotate-z="45" data-rotate-y="-45" data-rotate-order="zyx">
|
||
|
|
<p>Slide two</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="step-3" class="step" data-x="700" data-y="350" data-z="-350" data-rotate-z="90" data-rotate-y="-90" data-rotate-order="zyx">
|
||
|
|
<p>Slide three</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="step-4" class="step" data-x="422" data-y="780" data-z="-250" data-rotate-z="135" data-rotate-y="-135" data-rotate-order="zyx">
|
||
|
|
<p>Slide four</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="step-5" class="step" data-x="0" data-y="702" data-z="0" data-rotate-z="180" data-rotate-y="-180" data-rotate-order="zyx">
|
||
|
|
<p>Slide five</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="step-6" class="step" data-x="379" data-y="780" data-z="270" data-rotate-z="135" data-rotate-y="-225" data-rotate-order="zyx">
|
||
|
|
<p>Slide six</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="step-7" class="step" data-x="700" data-y="350" data-z="350" data-rotate-z="90" data-rotate-y="-270" data-rotate-order="zyx">
|
||
|
|
<p>Slide seven</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="step-8" class="step" data-x="379" data-y="-70" data-z="270" data-rotate-z="45" data-rotate-y="-315" data-rotate-order="zyx"
|
||
|
|
data-goto-next="step-1">
|
||
|
|
<p>Slide eight</p>
|
||
|
|
</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>
|