Setup the 1st template.html
<!doctype html>
<html>
<head>
<title>Impress Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="step"> My 1st slide </div>
<script type="text/javascript" src="impress.js"></script>
<script>impress().init()</script>
</body>
</html>
From the template.html, copy and make your own the 1st impress.js's presentation.
The very 1st slide is always at the position (0,0,0) for x,y,z. Usually you only start add in the animation from slide 2 onward. Below are the only commands that you need to learn how to animate the slide transition.
- data-x="800" - Positive (move-to-right), Negative (move-to-left)
- data-y="500" - Positive (move-down), Negative (move-to-up)
- data-z="1200" - Positive (come-close), Negative (go-far)
- data-scale="5" - Scale X times (1: original; x: bigger; 0.x: smaller)
- data-rotate-x="90" - 3D sliding. Positive (rotate-to-up-degree), Negative (rotate-to-down-degree)
- data-rotate-y="180" - 3D sliding. Positive (rotate-to-left-degree), Negative (rotate-to-right-degree)
- data-rotate-z="270" - 3D sliding. Rotated about the z-axis.
Example, I'm creating 4 slides, and wish them to rotate to right like a cube.
<div class="step"> My 1st slide </div>
<div class="step" data-rotate-y="90"> My 2nd slide </div>
<div class="step" data-rotate-y="180"> My 3rd slide </div>
<div class="step" data-rotate-y="270"> My 4th slide </div>