Talk about the preliminary understanding of impress.js_javascript skills

1. Understanding impress.js

　impress.js is a presentation layer framework (presentation tool) that is used by developers using CSS3 and JavaScript languages.

Now ordinary developers can use impress.js to develop a presentation tool with similar effects, but with better performance than FLASH-based Prezi. Its functions 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, slide presentations in the form of traditional PowerPoint are also supported.

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.

2. Use impress.js

Introducing impress.js:

Copy code The code is as follows:

Now you can see how easy it is to create a new slideshow. Each slide is a

element (within a wrapper) whose class name is 'step'.

Copy code The code is as follows:

My first slide

Even though you’re creating a simple slideshow, it’s fun when you start adding data attributes to your slideshow. Data attributes represent properties of your slide when it is not the active slide. You can use the following data attributes:

data-x = x coordinate of the slide

data-y = y coordinate of the slide

data-scale = Zoom by specifying a value. A data-scale of 5 will enlarge your slide by 5 times the original size

data-rotate = Rotate your slides by a numerical degree

data-rotate-x = For 3D, this number is how much it should be rotated relative to the x-axis. (Lean forward/lean back)

data-rotate-y = For 3D, this number is how much it should be rotated relative to the y-axis. (Swing left/right)

data-rotate-z = For 3D, this number is how much it should be rotated relative to the z-axis.

Instance directory:

The above content is my preliminary understanding of impress.js. It may be superficial. I will study it in depth later. Please continue to pay attention to this site.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn