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

Source: Internet
Author: User

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 codeThe Code is 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 codeThe Code is 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.