Home > Developer > Web Develop
Impress.js is a developer-based presentation framework ( Demo tool ) that is Prezi inspired by a foreign developer in CSS3 and JavaScript language. Its features include unlimited rotation and zooming of the canvas, arbitrary-sized text at any angle, CSS3 3D effect support, and more. It also supports slideshows in traditional PowerPoint format. currently Impress.js is based on WebKit browser (Chrome, Safari), while other browsers based on non-webkit engines that support CSS3 3D can function properly.
impreess Source has been posted on GitHub, address : https://github.com/bartaz/impress.js
Official Demo address : Http://bartaz.github.com/impress.js
OK, here we are! Read two blog, oneself also can't help wanting to share impress.js, install X sharp weapon, so please forgive me to install X! I believe everyone through the first paragraph has a general understanding of impress.js, yes, the above paragraph I was copy! (the article ends with a source) so, you know, I'm loading x!
When you get used to getting bored with PowerPoint to make ppt, Impress.js's appearance really makes you feel compelled to try something new, but only if you know a bit about the front-end knowledge will be better. Of course, if you're talented, you just ignore me and act!
In the files downloaded from github you will find out how not to explain/use the document, in fact, his instructions are all in the HTML file comments. However, for the English poor children's shoes, so the birds are really torture! I personally think the original reading difficulty is not big, as long as the occasional Youdao, read the basic can understand, the next time directly ignore these comments can be. But if you're still a bird, here's someone else who's already translated:
Http://www.360doc.com/content/12/1207/15/176942_252688895.shtml
The demo:http://eyehere.net/wp-content/uploads/2012/11/impress_cn.html#/bored of Chinese
Although through the above link basic can learn to use the impress.js, but I still have to summarize about it!
First, the HTML is simple to build, first Impress-demo.css and impress.js two files introduced:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8" /> <title>Impress.js How to use</title> <Linkhref= "Css/impress-demo.css"rel= "stylesheet" /> <Linkrel= "shortcut icon"href= "Favicon.png" /> <Linkrel= "Apple-touch-icon"href= "Apple-touch-icon.png" /></Head><Bodyclass= "impress-not-supported"><DivID= "Impress"></Div><Scriptsrc= "Js/impress.js"></Script><Script>impress (). Init ();</Script></Body></HTML>
The BODY element generally adds a class called ' impress-not-supported ', which can easily determine whether the current browser supports the CSS or script we need, and if the browser does not support it, you can use this class to display some callback information. Although Impress.js will be detected and automatically added to, but it is better to add their own more insurance Oh!
When the browser is not supported, we can add a callback message that is displayed only under the body with the ' impress-not-supported ' class name:
<Divclass= "Fallback-message"> <P>The browser is too corny!<b>Unable to meet impress.js requirements</b>, now you can only see some of the most simple demo screens.</P> <P>To enjoy the beautiful presentation, use modern, elegant, fast, beautiful, free, contemporary browsers such as<b>Chrome</b>,<b>Safari</b>Or<b>Firefox</b>。</P></Div>
Create a id= "impress" of the wrapper (vector), generally directly with the div is good, all of our scenes are placed here div inside. Of course other tags are also possible, but the ID name must be impress.
<id= "Impress"></div>
The data-transition-duration property changes the speed of the switching scene by default to 1000 (that is, 1 seconds). The data-perspective property changes the depth of the perspective by default to 1000. If set to 0, you will not see any 3D effect. In general, the default is the line, that is, no need to set up.
Create a slideshow within wrapper simply create a <div> of class= "step". The ID of <div> is optional, and when there is an ID the hash change in the URL is along with the ID, and even if you don't define it, you can still use step-n to find the scene. Because the id attribute is only used to represent the URL of the scene, it is not actually a necessary thing.
<class= "Step"> a scene </Div >
list the data properties :
Data-x, Data-y, data-z: They define the position of the center of the element in the canvas (that is, the x, y, z coordinates of the slide), which is 0 by default;
Data-scale: Defines the ratio of element scaling, which by default is 5 times times larger than the original size of your slide, with a 1,data-scale of 5;
Data-rotate: By a number of degrees to determine the rotation of your slide, positive numbers clockwise rotation, negative numbers counterclockwise rotation;
Data-rotate-x: 3D scene, the relative x-axis rotation of how many degrees. (leaning forward/backward);
Data-rotate-y = 3D scene, how many degrees of rotation relative to the Y axis. (Left pendulum/right pendulum);
Data-rotate-z = 3D scene, the relative Z axis rotation how many degrees, in fact, the effect is the same as data-rotate.
In fact, the data properties are not difficult to use, it is also very simple, mainly your idea of how to be creative, how to realize how cool, these are the places where you take Kung Fu!
Take the demo code as an example:
In the following scenario, we set the properties of ' data-x= '-1000 ' and ' data-y= '-1500 '. This means that this element is located throughout the slide ( -1000px, -1500px).
<DivID= "Bored"class= "Step Slide"Data-x= " -1000"data-y= " -1500"> <Q>Do you think the traditional slides are<b>It's a weak bomb.</b>？</Q> </Div>
This time we wrote a ' data-scale= ' 4 ', so that the element would be magnified 4 times times. If you exit from this scene, it will be restored to its original size (4 times times smaller).
<DivID= "title"class= "Step"Data-x= "0"data-y= "0"Data-scale= "4"> <spanclass= "Try">Well, you should try</span> <H1>Impress.js<sup>*</sup></H1> <spanclass= "footnote"><sup>*</sup>American little Humor, ignoring</span></Div>
We used the ' data-rotate= ' 90 ' property, which means the scene will be rotated 90 degrees clockwise.
<DivID= "its"class= "Step"Data-x= "850"data-y= " the"data-rotate= "All"Data-scale= "5"> <P>It is a<Strong>Presentation Tools</Strong> <BR/>Affected by<ahref= "Http://prezi.com">Prezi.com</a>Inspired<BR/>based on the modern browser<Strong>Powerful CSS3 effects</Strong>Developed into</P> </Div>
We can also define a third coordinate, which is ' data-z '. The addition of ' data-z= '-3000 ' means the scene is 3000px that far from us.
<DivID= "Tiny"class= "Step"Data-x= "2825"data-y= "2325"data-z= " -3000"data-rotate= "+"Data-scale= "1"> <P>Or<spanstyle= "Font-size:smaller">Meticulous</span>Of<spanclass= "Thoughts">Idea</span></P> </Div>
Global preview, all the slides are displayed in parallel, usually put at the end:
<id= "Overview" class= "Step" data-x= " +" data-y = " the" Data-scale = "Ten" > </ Div >
Finally, remember to initialize:
< Script > impress (). Init (); </ Script >
Well, here's a summary of some knowledge points, followed by a demo code. Of course, if you want to create a more fun or cool ppt display, you still have to play with your creativity, not just limited to the demo effect! I have to study it myself ...
Reference here: http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html
Impress.js first experience-front mounted x sharp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
