Home > Developer > Web Develop
If you are tired of using PowerPoint to make ppt, then Impress.js is a very good choice, use it to make PPT more intuitive, the effect is very good. It takes a price to install X, but if you're a front-end enthusiast then everything is fine. Of course, if you can barely understand HTML and CSS is no problem, look at this article + a little bit of practice (the official online example to change) can ...
Impress.js is a developer-based presentation framework ( Demo tool ) that is Prezi inspired by a foreign developer in CSS3 and JavaScript language. Now ordinary developers can use impress.js to develop a similar effect of the demo tool, but performance than the FLASH-based Prezi more excellent. 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
Because the description document & use document is not found on its project page, this article will create a more introductory presentation step by step, and we'll go down.
Get ready for a modern browser: Google Chrome (Best of Breed), Safari, or ff.
* My IE10 do not support, do not know why a lot of information on the written IE10 can support, back a reminder.
<!doctype html>
<div class= "Step" > First slide</div>
Data-x = x coordinate of the slide
Data-y = y-coordinate of the slide
Data-scale = by specifying a value to scale, Data-scale 5 will enlarge 5 times times the original size of your slide
Data-rotate = Determines the rotation of your slide by a number of degrees
Data-rotate-x = for 3D, the number of degrees is how much it should rotate relative to the x axis. (Tilt forward/back)
Data-rotate-y = for 3D, the number of degrees is how much it should rotate relative to the Y axis. (Left pendulum/Right pendulum)
Data-rotate-z = for 3D, the number of degrees is how much it should rotate relative to the z axis.
CreateData attributes that's what you need to focus on next, and then start the step by step to create a presentation.
Starting with an initial slide, this slide has set its data-x and data-y data properties to 0, so it appears in the middle of the page.
<div class= "Step" data-x= "0" data-y= "0" > This is slide 1-"title" </div>
The second slide has a data-x value of 500, a data-y value of 0, and it moves to the pan left (sliding) 500px where it is active.
<div class= "Step" data-x= "data-y=" -400 "> This is slide 2</div>
The third slide has the same data-x value, and the data-y position is-400, which will slide into the screen from the top 400px.
<div class= "Step" data-x= "data-y=" -400 "> This is slide 3</div>
The four slides come in a new twist, using the value of the Data-scale to control its scaling small. data-scale= "0.5" means it should be half the size, and when it turns into an active presentation it will adjust the zoom size of all the slides with the necessary multiples, starting with a brilliant start
<div class= "Step" data-x= "data-y=" -800 "data-scale=" 0.5 "> This is slide 4</div>
The fifth slide Rotation property allows you to rotate a slide to the current view, slide 5 is set to rotate 90 degrees, and the visual effect is slightly
<div class= "Step" data-x= "0" data-y= " -800" data-rotate= ">" This is slide 5</div>
The sixth slide begins with the 3D style, which specifies the rotation properties (x, Y, z) for the axes of each dimension. The x-axis is the horizontal axis, meaning that you can skew things (positive values) or backwards (negative values), the y-axis is the vertical axis, so you can make things sway to the left (negative values) or to the right (positive values), the z axis is the vertical axes, which will be rotated things up (negative values) and downward (positive values
<div class= "Step" data-x= " -1200" data-y= "0" data-rotate-x= "" "data-rotate-y=" -30 "data-rotate-z=" 90 " data-scale= "4" > This is slide 6</div>
The above 6 slides pass the values in the data attributes once, and a slightly higher presentation will appear right before our eyes. You can combine these effects in incredible and surprising ways with your imagination to create your own slide show style.
This visual experience of the individual, all the slides are displayed in parallel, the arrangement of reasonable will be very handsome, using the way is to insert a piece of HTML after slide 6.
<div id= "Overview" class= "Step" data-x= " -200" data-y= " -500" data-scale= "3" ></div>
The value of the global preview will be different with your slide position, so take the demo at the end of the 1.1-point adjustment to find the feeling, hope you will like it!
Remember it when you're done, it's not limited to this, the only limitation is your creativity !
Personal experienceBecause we are the front-end, so with the front-end technology to do all kinds of attempts to do nothing bad, impress can make our presentation more innovative, so simple to understand is definitely worthwhile, learning is the best investment .
Advantages:
Disadvantages:
The following is the demo code, beginners to change their own hands to change the feeling is good.
<!doctype html><!doctype html>Suddenly think of a sentence as a summary of the article: " when you have a hammer, you look like nails ."
Turn http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html
Impress.js First Experience
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
