impress.js presentation layer framework (demonstration tool) - first experience

I haven’t blogged for half a year, which I feel a little ashamed of... I had a lot of fun during the New Year’s Day holiday: playing Dota (sadly, I lost more than I won), skiing, eating, and going shopping. In a blink of an eye, I have to go to work today. I got up early at 5 o'clock (I insist on going to bed early and getting up early recently). I can't help but share the tool that front-end engineers found some time ago, so the first blog post of the new year was born:)
Do you want others to say "wow" when they see your presentation? Do you want to shock your audience with flashy effects? Then let’s look down
------------------Text dividing line-----------------
Overview <br />If you are tired of using PowerPoint to make PPT, then impress.js is a very good choice. The PPT made with it is more intuitive and the effect is also very good. There is a price to pay for showing off, but if you are a front-end enthusiast then everything will be fine. Of course, if you can barely understand HTML and CSS, it's no problem. Just read this article and practice a little (modify the examples on the official website)...
impress.js is a presentation layer framework (presentation tool) for developers that was created by a foreign developer inspired by Prezi and using CSS3 and JavaScript. Now ordinary developers can use impress.js to develop presentation tools with similar effects, but with better performance than Prezi based on FLASH. Its features include unlimited rotation and scaling of the canvas, placement of text of any size at any angle, support for CSS3 3D effects, etc. At the same time, it also supports traditional PowerPoint slide presentations.
Currently, impress.js is developed based on webkit browsers (Chrome, Safari), but it can also run normally on other browsers based on non-webkit engines but supporting CSS3 3D.
The impreess source code has been published on GitHub, address: https://github.com/bartaz/impress.js
Official demo address: http://bartaz.github.com/impress.js
Because there is no documentation or usage documentation on its project website, this article will create a more basic presentation step by step. Let's move on.
Please have a modern browser ready: Google Chrome (best), Safari or FF.
*My IE10 is not supported. I don’t know why many materials say that IE10 is also supported. I’m sorry.

Configuration
The html5 page structure is ready. Create a wrapper (carrier) with id="impress". Just div. Other tags can also introduce the impress.js file and call it before the end of the body tag.
class="impress-not-supported" is the prompt information displayed to the user when the browser does not support it. You know the downgrade process, so I won't explain it in detail.

Copy code

The code is as follows:

To create a slideshow in a wrapper, just create a <div> with class="step". The id of <div> is optional. When there is an id, the hash in the URL changes with the id; otherwise, it is step-[num], such as

Copy code

The code is as follows:

<div class="step">
first slide
</div>

Data attributes: used to describe slide size, transition and other effects.
data-x = the x-coordinate of the slide
data-y = the y coordinate of the slide
data-scale = Scale by specifying a value. A data-scale of 5 will magnify your slide by 5 times its original size.
data-rotate = Rotate your slide by a number of degrees
data-rotate-x = For 3D use, this number is how many degrees it should be rotated about the x-axis. (Lean forward/lean back)
data-rotate-y = For 3D use, this number is how many degrees it should be rotated about the y-axis. (left swing/right swing)
data-rotate-z = For 3D use, this number is how many degrees it should be rotated about the z-axis.

Creating data attributes is what you need to focus on next. Then start creating a presentation step by step.
Start with an initial slide that has its data-x and data-y attributes set to 0 so it appears in the middle of the page.

Copy code

The code is as follows:

<div class="step" data-x="0" data-y="0">
This is slide 1 - 【Title】
</div>

The second slide has a data-x value of 500 and a data-y value of 0. When active, it will translate (slide) 500px to the left.

Copy code

The code is as follows:

<div class="step" data-x="500" data-y="-400">
This is slide 2
</div>

The third slide has the same data-x value and a data-y position of -400, which means it will slide into the screen 400px from the top.

Copy code

The code is as follows:

<div class="step" data-x="500" data-y="-400">
This is slide 3
</div>

The fourth slide has a new twist, using the value of data-scale to control its scaling. data-scale="0.5" means it should be half the size, and when it becomes the active presentation it will adjust the scale of all slides by the necessary multiples, making for a great start.

Copy code

The code is as follows:

<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>

The fifth slide rotation property allows you to rotate a slide to the current view. Slide 5 is set to rotate 90 degrees, which has a slightly cool visual effect.

Copy code

The code is as follows:

<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5
</div>

The sixth slide starts with the 3D style, which allows you to specify rotation properties for each axis of each dimension (x, y, z). The x-axis is the horizontal axis, meaning you can tilt things up (positive values) or down (negative values), the y-axis is the vertical axis, so you can swing things left (negative values) or right (positive values), and the z-axis is the longitudinal axis, which would be rotating things up (negative values) and down (positive values).

Copy code

The code is as follows:

<div class="step" data-x="-1200" data-y="0"
data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
This is slide 6
</div>

The above 6 slides go through the values in the data attributes, and a slightly high-level presentation is presented before us. You can use your imagination to combine these effects in incredible and surprising ways to create your own slideshow style.
I personally like the global preview. It displays all slides in parallel. If they are arranged reasonably, it will be very handsome. The way to use it is to insert a section of HTML after slide 6.

Copy code

The code is as follows:

The global preview value will be different depending on the position of your slide. Adjust the demo at the end little by little to get a feel for it. I hope you like it!
Once you are done remember it, there is so much more you can do with it, the only limit is your creativity!

Personal experience <br />Just because we are front-end developers, there is nothing wrong in trying various things with front-end technology. Impress can make our presentations more innovative, so it is definitely worthwhile to have a simple understanding of it. Learning is the best investment.
advantage :
I like the overview feature very much because I have to complete the HTML+CSS by myself, and I have to handle the position and effect by myself. I have control over the visual effects. The visual effect is the most gorgeous among similar products I have used, with CSS3+3D effects, which directly make the audience dizzy :)
shortcoming :
Impress is indeed very powerful in visual expression. Compared with HTML5Slides and Deck.js, which are also used for presentations, Impress.js is much more complex, and it may take a lot of time to make the presentation layout look good.
*If you have trouble with impress, you can take a look at the information of html5slides and deck.js. The visual effect will be slightly worse, but it will be much easier to get started.
Don't use 3D and rotation too fancy or too brightly, or people will feel dizzy. Just use it appropriately.

The following is the demo code. Beginners can modify it by themselves to get a feel for it.

Copy code

The code is as follows:

<!doctype html>
<html>
<head>
<title>darren - Impress demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <b>does not support</b> impress.js, so a simplified version is currently displayed. </p>
<p>For a better experience, please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser. </p>
</div>
</div>
<div id="impress">
<div class="step" data-x="0" data-y="0">
Darren code - [Title]
</div>
<div class="step" data-x="500" data-y="0">
This is slide 2
</div>
<div class="step" data-x="500" data-y="-400">
This is slide 3
</div>
<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>
<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5
</div>
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
This is slide 6
</div>

<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>
</div>
<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>

Suddenly I remembered a sentence to summarize the article: "When you have a hammer, everything looks like a nail."
If you think this article is well written, please click the recommendation button in the lower right corner.
Today is 2013.1.4, an amazing day. I wonder how many people will go to register today. I envy you and wish you all the best. I will also work harder, hoho
I wish you all a happy and successful 2013.

<<: Docker uses the Prune command to clean up the none image

>>: HTML end tag issue and w3c standard