Scaling effects

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...