Scaling in impress.js is much simpler compared to what we discussed in previous sections about positioning and rotations. There is only scaling up or scaling down and the x, y, and z axes will not have any effect on scaling. So let's get things moving by identifying the data attribute for scaling, which will be defined as data-scale
.
Note
Scaling up and down can be considered as zoom-out and zoom-in effects. A default data-scale
value of each step is equal to 1
.
Consider the following code snippet, which defines three steps with data-scale
values:
<div id="impress"> <!-- Row 1 --> <div id="slide1" class="step slide" data-x="0" data-y="500" data-scale="1" > <div><h2>Step 1</h2></div> </div> <div id="slide2" class="step slide" data-x="0" data-y="300" data-scale="2" > <div><h2>Step 2</h2></div> </div> <div id="slide3" class="step slide" data-x="0" data-scale...