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:
Now you can see how easy it is to create a new slideshow. Each slide is a
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.