Last week I saw a friend do a cool zoom slide, maybe because I didn't know much about this knowledge, I found a few web slide tools for a long time. The impress.js of geek is determined by filtering.
Impress.js is a new slideshow tool, its effect is similar to Prezi, but with 3D function, but also under the MIT&GPL agreement open source, for a certain foundation of web development, is really a gospel! Simply use some HTML instructions and load the impress.js to create a gorgeous zoom slide.
First you need to write some head, this is the same as the normal web, but the body is different. Now impress.js only supports modern browsers such as Chrome, Firefox and Safari (ie ...). ), so you need a fallback message.
<body class= "impress-not-supported" > <div class= "Fallback-message" > <p>your Browser < B>DOESN ' t support the features required</b> by Impress.js-so-are-with-a presented version of this Presentation.</p> <p>for The best experience to use the latest <b>chrome</b>, <b> safari</b> or <b>Firefox</b> browser.</p> </div>
Then start writing the real subject, the impress part. This part must be completely framed in the "\ < div id=" impress ">".
The first slide is step slide, which is like a regular slide, and it's a page. You can add it in the following ways
<div id= "Page1" class= "Step Slide" data-x= " -1000" data-y= " -1500" > <q> first page of slides </q> </div >
What you need to write is ID, data-x and data-y. ID is a name, and Data-x, Data-y is the coordinates. In fact, Impress.js is giving you a great venue set, and all you need is to throw a slide in the right place. Then it will be displayed in the order in which you throw it. In fact, there is a coordinate, is data-z, this coordinate can bring you into the 3D effect, zoom.
Another slide is called step, unlike the previous one with a rigid frame, which completely removes the box that restricts you, but writes it directly on the background. Take a look at the following example:
<div id= "title" class= "Step" data-x= "0" data-y= "0" data-scale= "4" > <span> you see slides by </span>
In particular, there is a data-scale, indicating the size of the slide, you can make a page very large or very small to provide a zoom contrast. There is also a rotation function:
<div id= "its" class= "step" data-x= "850" data-y= "3000" data-rotate= "" data-scale= "5" > <p> this is a < Strong>presentation tool</strong> <br/> author from <a href= "http://prezi.com" >prezi.com</a > Get Inspiration <br/> use modern browser <strong>css3 transforms and transitions</strong> power </p> < /div>
The data-rotate above is the angle that represents the rotation.
Finally, you can provide a hint that tells the user to use the keyboard's arrow keys to control the entire playback process. If the user just opened the slide and didn't respond, the hint would automatically emerge.
<div class= "hint" > <p> please use the arrow keys to control </p> </div>
At the end of the page, you need to load impress.js, I'm here to directly quote the author's page, but if it's offline, suggest downloading it for use. It is not enough to load JS only, it needs to be started with impress (). Init ().
<script src= "Http://bartaz.github.io/impress.js/js/impress.js" ></script> <script>impress ( ). Init ();</script>
In fact, this tool has a lot of functions, I just learned some of the most basic functions. The official website suggestion is to look directly at him to provide the index.html, inside has the detailed annotation to tell you to have what function, I have made a page, also is from the author provides index.html to change out. While these things are simple, it's good enough to make a PowerPoint presentation. I do the page on the gist, the overall code see the end of this page.
Of course, similar tools cannot help mentioning Prezi, which is the original realization of this idea, but it is said that it does not support Chinese. Domestic Tencent Alloyteam also developed a tool called IPRESST, which can be said to be a fool-grade good thing, but because it is social network type, a little less privacy. The biggest flaw of Impress.js is that it is too geek, and if you can have a WYSIWYG development tool, it will be able to spread.
<!doctype html>
The above is what I share for you to use impress.js to make slides, the code is very simple, I hope to help you learn.
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
