Talking about Impress.js preliminary understanding _javascript Skills

1. Understanding of Impress.js

Impress.js uses the CSS3 and JavaScript language to complete a presentation-Layer framework (Demo tool) for developers.

Now ordinary developers can use impress.js to develop their own demo tools of similar effects, but performance is better than Prezi based on FLASH. Its functions include the infinite rotation and scaling of the canvas, arbitrary angle of any size text, CSS3 3D effect support and so on. It also supports slideshow demonstrations in traditional PowerPoint forms.

Currently, Impress.js is based on WebKit browsers (Chrome, Safari) and in other WebKit engines, but CSS3 3D browsers are working.

2. Use Impress.js

Introduction of Impress.js:

Copy Code code as follows:

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

Now you can see how much easier it is to create a new slide. Each slide is a <div> element (within wrapper) whose class name is called ' Step '.

Copy Code code as follows:

<div class= "Step" >
My I-Slide
</div>

While creating a simple slide show, it's fun to start adding data attributes to your slides. The data attribute indicates that it is not the property of your slides when the slide is active, and you can use the following data properties:

Data-x = x coordinate of the slide

Data-y = the y-coordinate of the slide

Data-scale = by specifying a value for scaling, Data-scale 5 will magnify 5 times times the original size base of your slides

Data-rotate = Rotate your slides by a number of degrees

Data-rotate-x = for 3D, this number is the degree to which it should rotate relative to the x axis. (leaning forward/backward)

Data-rotate-y = 3D, this number is the degree to which it should rotate relative to the Y axis. (Left pendulum/Right pendulum)

Data-rotate-z = 3D, this number is the degree to which it should rotate relative to the z axis.

Instance directory:

The above content is my preliminary understanding of the impress.js, may be more superficial understanding of this, after the small series will further study, please continue to pay attention to this site.