629f7686f3
The relative position in rel plugin is currently based on the world coordinate. So for the same effect, like fly in from the right-hand side, we must use different `data-rel-x/y/z` value. Why not let the plugin do the hard part? So I introduce a `data-rel-position`, when set to `relative`, all relative attribute is based on the position and rotation of previous slide. So no matter the rotation of previous slide, data-rel-x="1000" always looks like fly in from the right-hand side. We can change the position and rotation of one slide, and the position of all following slides will be changed too. When `data-rel-position` is set to `relative`, relative rotation has a clear meaning. It describes the relative rotations between slides. We don't need to set rotations for all slide, setting the key slides is enough. If `data-rel-position` is not relative, the effect of `data-rel-rotate-x/y/z` is not clear, so they're only used when `data-rel-position="relative"`. After the introduction of relative rotation, there're 6 attribute that will inherit from previous slide. If we want to set a relative X move, we have to set all other 5 attributes to 0. It's boring. So a `data-rel-clear` is used to set all 6 attributes to 0, and then the value specified in current slide is applied. The `examples/3D-positions/index.html` shows some usage. As you can see, the html code of two slide ring is the same, and slides except for the first two in a ring has no position attributes. It work by inheriting the previous one. This PR invokes a lot math calculations. Basically, the rotation of a slide is translated into the coordinate describing the directions of X/Y/Z axes. And `data-rel-x/y/z` can be easily calculated by that. The rotations is the hard part, I mainly use the algorithm in the Quaternions and spatial rotation - Wikipedia to compose two and more rotations. I'm not a math guy, hope I don't make much mistakes.
107 lines
3.2 KiB
HTML
107 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>The presentation steps used in an iframe in rel/rotation_tests.js</title>
|
|
<style type="text/css" media="screen">
|
|
.step {
|
|
position: relative;
|
|
width: 1000px;
|
|
height: 1000px;
|
|
padding: 40px 60px;
|
|
margin: 20px auto;
|
|
|
|
box-sizing: border-box;
|
|
|
|
line-height: 1.5;
|
|
|
|
background-color: none;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
|
|
|
|
text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
|
|
|
|
font-family: 'Open Sans', Arial, sans-serif;
|
|
font-size: 40pt;
|
|
letter-spacing: -1px;
|
|
border: solid 1px red;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="impress-not-supported">
|
|
<div id="impress" data-width="1920" data-height="1200">
|
|
<div id="overview" class="step overview" data-x="0" data-y="-1000" data-z="100" data-scale="4" data-rotate-x="45">
|
|
<h1>Testing related to <code>data-rel-to</code></h1>
|
|
</div>
|
|
|
|
<div id="abs-1" class="step" data-x="0" data-y="0" data-z="0">
|
|
<p>Testing default rel-position</p>
|
|
</div>
|
|
|
|
<div id="abs-2" class="step" data-rel-rotate-y="45" data-rel-z="-354" data-rel-x="854" data-rel-y="-125">
|
|
<p>default rel-position, rel-rotate not work</p>
|
|
</div>
|
|
|
|
<div id="abs-3" class="step">
|
|
<p>Should inherit rel-x/y/z, not rel-rotate-y</p>
|
|
</div>
|
|
|
|
<div id="abs-4" class="step" data-rel-reset data-rel-x="100">
|
|
<p>position out of flow</p>
|
|
</div>
|
|
|
|
<div id="abs-5" class="step" data-rel-to="abs-3">
|
|
<p>Should re-position at abs-3, but doesn't inherit from it</p>
|
|
</div>
|
|
|
|
<div id="abs-6" class="step">
|
|
<p>Should be the same as abs-5</p>
|
|
</div>
|
|
|
|
<div id="relative-1" class="step" data-rel-reset="all" data-rel-position="relative" data-x="0" data-y="1000" data-z="0">
|
|
<p>Testing rel-position="relative"</p>
|
|
</div>
|
|
|
|
<div id="relative-2" class="step" data-rel-rotate-y="45" data-rel-z="-354" data-rel-x="854" data-rel-y="-125">
|
|
<p>All rel-* will be inherited from previous slide</p>
|
|
</div>
|
|
|
|
<div id="relative-3" class="step">
|
|
<p>inherit again</p>
|
|
</div>
|
|
|
|
<div id="relative-4" class="step" data-rel-reset="all" data-rel-x="100">
|
|
<p>position out of flow</p>
|
|
</div>
|
|
|
|
<div id="relative-5" class="step" data-rel-to="relative-3">
|
|
<p>Should re-position at relative-3, and inherit all relatives from it</p>
|
|
</div>
|
|
|
|
<div id="relative-6" class="step">
|
|
<p>keep inheriting</p>
|
|
</div>
|
|
|
|
<div id="relative-7" class="step" data-rel-to="relative-3" data-rel-reset>
|
|
<p>Should re-position at relative-3, but clear all relative attributes</p>
|
|
</div>
|
|
|
|
<div id="relative-8" class="step">
|
|
<p>keep inheriting</p>
|
|
</div>
|
|
|
|
<div id="relative-9" class="step" data-rel-to="relative-3" data-rel-reset="all">
|
|
<p>Should re-position at relative-3, but clear data-rotate-* in addition to all relative attributes</p>
|
|
</div>
|
|
|
|
<div id="relative-10" class="step">
|
|
<p>keep inheriting</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../../js/impress.js"></script>
|
|
<!-- <script>impress().init();</script> -->
|
|
</body>
|
|
<html>
|