In this article, I will show an example of how to use the impress.js library to make a presentation in Javascript.
The library leaves plenty of flexibility to the user.
If you have nothing to present, the library will not help you. You should have an idea in mind, put it on paper, design the slides in HTML and CSS, and the use this library to put things together, keeping in mind that the transitions between slides are automatically handled, depending on the relative position between the two slides.
Once your idea is on paper, you can place your slides and style them.
On each div, you set the data-x, data-y, data-z attributes, place your slide on the 3d canvas. The rotation of each slide can be defined by setting the data-rotate-x, data-rotate-y and data-rotate-z like shown below:
Slide 1: This slide defines no rotation or positioning
|
1 2 3 4 5 6 7 8 9 10 |
<div id="title" class="step" data-x="0" data-y="0" data-scale="2"> <img src="img/stand-out3.jpg"><br> <p class="next">Would you like your idea to stand out? </p> <q><a href="#great"><img src="img/arrow-right.jpg"></a></q> <div class="hint"> <p>Use a spacebar, arrow keys to navigate or click on the arrow.</p> </div> </div> |
Slide 2: This one defines a shift of 1500 pixels to the right (data-x) and a rotation of 180 degrees with relation to the x axis. The data scale also changes from 2 to 4.
|
1 2 3 4 5 |
<div id="great" class="step" data-x="1500" data-y="0" data-rotate="180" data-scale="4"> <img src="img/great.jpg"><br> <p>Make it look <b>great?</b> </p> <br> <q><a href="#small"><img src="img/arrow-right.jpg"></a></q> </div> |
Slide 3: This slide is place 1500 in the negative axis, giving the impression of being further away.
|
1 2 3 4 5 |
<div id="small" class="step" data-x="0" data-y="0" data-rotate="180" data-z="-1500" data-scale="2"> <p>do your ideas look <b>small</b> sometimes? </p> <q><a href="#tool"><img src="img/arrow-right.jpg"></a></q> </div> |
Slide 4: Here the slider goes back to the original rotation and shifts to the left
|
1 2 3 4 5 |
<div id="tool" class="step" data-x="0" data-y="-1500" data-scale="2"> <p>what you need is the right <b class="imagination">tool.</b></p> <q><a href="#engaging"><img src="img/arrow-right.jpg"></a></q> </div> |
Slides 5, 6 and 7: These 3 slides are positioned 45 degrees from each other, around the x axis. This create a cool rotation effect:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="engaging" class="step" data-x="3000" data-y="3000" data-rotate-x="-45" data-rotate-y="10"data-scale="2"> <img src="img/engaging.jpg"><br> <p>A tool that engages,</p> <q><a href="#noboundaries"><img src="img/arrow-right.jpg"></a></q> </div> <div id="noboundaries" class="step" data-x="3200" data-y="5000" data-rotate-x="-90" data-rotate-y="10" data-scale="2"> <img src="img/no-boundaries.jpg"><br> <p>has no boundaries...</p> <q><a href="#creativity"><img src="img/arrow-right.jpg"></a></q> </div> <div id="creativity" class="step" data-x="3400" data-y="7000" data-rotate-x="-135" data-rotate-y="10" data-scale="2"> <img src="img/creativity.jpg"><br> <p>... and leaves room to your creativity.</p> <q><a href="#impress.js"><img src="img/arrow-right.jpg"></a></q> </div> |
Slides 8, 9 and 10: End of the presentation.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="impress.js" class="step" data-x="5000" data-y="7000" data-z="3000" data-rotate="20" data-scale="10"> <q>This is <a href="http://bartaz.github.com/impress.js">impress.js</a></q> <q><a href="#impressed"><img src="img/arrow-right.jpg"></a></q> </div> <div id="impressed" class="step" data-x="6000" data-y="4000" data-scale="2"> <p>We were impressed...</p> <q><a href="#coming-next"><img src="img/arrow-right.jpg"></a></q> </div> <div id="coming-next" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2"> <p><span class="have">The</span> <span class="you">possibilities</span> <span class="noticed">are</span> <span class="its">many</span></p> <span class="footnote">watch out for our next article.</span> </div> |
You can style your slides using CSS. In this example, there are some common things to all slides (with the step class)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* COMMON STEP STYLES */ .step { width: 900px; padding: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-family: 'PT Serif', georgia, serif; font-size: 48px; line-height: 1.5; } .step { -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } /* fade out inactive slides */ .step:not(.active) { opacity: 0.3; } |
DIV attributes that you can set:
- data-x- Places the slide on the x-axis
- data-y- Places the slide on the y-axis
- data-z- Places the slide on the z-axis
- data-scale- Scales your slides in respect to the other slides. Example: If current scale value is 1, data-scale=’4′ will scale the slide 4 times bigger than other slides and data-scale=’-4′ will reduce the scale of the slide to 4 times smaller.
- data-rotate-x Rotates the slide around the x-axis by a given number degrees.
- data-rotate-y Rotates the slide around the y-axis by a given number degrees.
- data-rotate-z Rotates the slide around the z-axis by a given number degrees.
The impress.js library will workout the transition to the next slide, depending on the relative position.
Take a look at it and have fun!
Images on the demo and article downloaded from Shutterstock: introduction image group portrait cat cat on tree cat and dog computer
Pingback: impress.js - Presentation tool in Javascript - Part 2 | Design Inspiration, Tutorials and Tips | Top Creative Magazine