Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of impress.js presentation layer framework, which is very detailed and has certain reference value. Friends who are interested must finish it!

-text segmentation line-

Overview

If you are tired of using PowerPoint to make PPT, then impress.js is a very good choice, using it to do PPT is more intuitive, the effect is also very good. Installing X comes at a price, but if you are a front-end enthusiast, then everything will be fine. Of course, if you can barely understand HTML and CSS, take a look at this article + a little practice (use the examples on the official website to correct).

Impress.js is a presentation framework (demonstration tool) that a foreign developer is inspired by Prezi and completed in CSS3 and JavaScript language. Now ordinary developers can use impress.js to develop their own demonstration tools with similar effects, but the performance is better than FLASH-based Prezi. Its functions include unlimited rotation and scaling of the canvas, placing text of any size at any angle, support for CSS3 3D effects, and so on. At the same time, it also supports the traditional PowerPoint form of slide presentation.

At present, impress.js is developed based on webkit browsers (Chrome, Safari), while other browsers based on non-webkit engines but supporting CSS3 3D can also work properly.

The impreess source code has been posted on GitHub at https://github.com/bartaz/impress.js

Official demo address: http://bartaz.github.com/impress.js

Because the documentation for using the documentation is not found on its project web page, this article will create a more rudimentary presentation step by step, and we will move on.

Please prepare modern browsers: Google Chrome (for best results), Safari or FF.

* my IE10 does not support it. I don't know why a lot of materials say that IE10 can also support it.

Configuration

The html5 page structure is ready first.

Create a wrapper (carrier) of id= "impress". Just div directly. Other tags can also be used.

Introduce the impress.js file before the end of the body tag and call the

Class= "impress-not-supported" is a prompt message displayed to the user when the browser does not support it. Downgrade processing, you know, without much explanation.

The code is as follows:

Darren-Impress demo

Impress () .init ()

To create a slide in wrapper, you only need to create a new class= "step". Id is optional. When there is id, the change of hash in url goes with id; on the contrary, it is step- [num], such as

The code is as follows:

First slide

Data properties: used to describe slide size, switching and other effects.

Data-x = x coordinates of the slide

Data-y = y coordinates of the slide

Data-scale = zoom by specifying a value. A data-scale of 5 will magnify 5 times the original size of your slide.

Data-rotate = rotates your slide by a number of degrees

Data-rotate-x = for 3D, this number of degrees is how many degrees it should rotate relative to the x-axis. (lean forward / lean back)

Data-rotate-y = for 3D, this number of degrees is how many degrees it should rotate relative to the y-axis. (left / right pendulum)

Data-rotate-z = for 3D, this number of degrees is how many degrees it should rotate relative to the z-axis.

Create

The data attributes section is what you need to focus on next, and then start step by step to create a presentation.

Starting with an initial slide, the slide has its data-x and data-y data properties set to 0, so it appears in the middle of the page.

The code is as follows:

This is slide 1-[title]

The second slide has a data-x value of 500 and a data- y value of 0, which translates (slides) 500px to the left when active.

The code is as follows:

This is slide 2

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

The code is as follows:

This is slide 3

The fourth slide gives a new twist, using the value of data-scale to control its zoom size. Data-scale= "0.5" means that it should be half the size, and when it becomes an active presentation, it will adjust the zoom size of all slides by the necessary multiples, starting with this gorgeous step.

The code is as follows:

This is slide 4

The fifth slide rotation property allows you to rotate a slide to the current view. Slide 5 is set to rotate 90 degrees.

The code is as follows:

This is slide 5

The sixth slide starts with 3D style, which specifies the rotation attribute for the axis of each dimension (x _ quotient _ z). The x-axis is the horizontal axis, which means you can tilt things (positive) or backward (negative), the y-axis is the vertical axis, so you can make things sway to the left (negative) or right (positive), and the z-axis is the vertical axis, which will be the things that rotate up (negative) and down (positive).

The code is as follows:

This is slide 6

The above six slides go through the values in the data properties, and a slightly high presentation is right in front of us. You can use your imagination to combine these effects in incredible and amazing ways to create your own slide presentation style.

Global preview

Personal awesome visual experience, all the slides are displayed in parallel, arranged reasonably will be very handsome, the way to use is to insert a html after slide 6.

The code is as follows:

Depending on the location of your slide, the value of the global preview will be different. Take the demo at the end and adjust it bit by bit to find a feeling. I hope you like it!

Please remember it when you are done, what you can do with it is not limited to this, the only limitation is your creativity!

Personal experience

Because we are the front-end, there is nothing wrong with using the front-end technology to try, and impress can make our presentation more innovative, so a simple understanding is definitely worth it, and learning is the best investment.

Advantages:

Personally, I like the function of overview very much.

Because the HTML+CSS needs to be done by itself, the location and effects have to be handled by themselves, and the visual effects are controlled by themselves.

In the similar products I have used, the visual effect is the most awesome, CSS3+3D effect, directly to the audience to see dizzy:)

Disadvantages:

Impress is indeed very powerful in visual performance. Impress.js is much more complex than html5slides and deck.js, which also do presentations, and it may take a lot of time to make a presentation look good.

* if you have trouble with impress, you can check out the materials 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 gaudily or too fancy, the viewer will get dizzy, as long as it's appropriate.

The following is the demo code. It would be nice for beginners to make more changes themselves.

The code is as follows:

Darren-Impress demo

Your browser does not support impress.js, so you are currently showing a simplified version.

For a better experience, use the latest Chrome, Safari or Firefox browsers.

Darren code-[title]

This is slide 2

This is slide 3

This is slide 4

This is slide 5

This is slide 6

Impress () .init ()

The above is all the content of the article "sample Analysis of the impress.js presentation Framework". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.