Let's talk about impress. js's preliminary understanding and impress. js's understanding

Let's talk about impress. js's preliminary understanding and impress. js's understanding

1. Understanding of impress. js

Impress. js uses CSS3 and JavaScript to implement a presentation layer framework (Demo tool) for developers ).

Currently, common developers can use impress. js to develop demo tools with similar effects, but the performance is better than FLASH-based Prezi. Its functions include unlimited rotation and scaling of the canvas, placing texts of any size at any angle, and supporting CSS3 3D effects. It also supports traditional PowerPoint slides.

Currently, impress. js is developed based on webkit browsers (Chrome and Safari), while other browsers that are based on non-webkit engines but support CSS3 3D can run normally.

2. Use impress. js

Import impress. js:

 

Copy the Code as follows:

<script src="js/impress.js"></script>

 

Now you can see how easy it is to create a new slide. Each slide is a <div> element (in wrapper) whose class name is 'step '.

 

Copy the Code as follows:

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

　

Although it is to create a simple slide, it is still interesting when you start to add data attributes to your slides. The data Property indicates that it is not the property of your slides during the activity slides. You can use the following data property:

Data-x = x coordinate of the slide

Data-y = y coordinate of the slide

Data-scale = scale by specifying a value. If data-scale is 5, it will be 5 times larger than the original size of your slides.

Data-rotate = use a number to determine how to rotate your slides

Data-rotate-x = is used in 3D, and the number of degrees is the number of degrees it should rotate relative to the x axis. (Forward/backward)

Data-rotate-y = is used in 3D, and the number of degrees is how much it should rotate relative to the y axis. (Left/right)

Data-rotate-z = is used in 3D. This number is the number of degrees it should rotate relative to the z axis.

Instance directory:

The above content is my preliminary understanding of impress. js, which may be superficial. Later I will make further research and ask netizens to continue to pay attention to this site.