Get started with Impress. js and impress. js

Get started with Impress. js and impress. js

 

Impress. js is a foreign developer inspired by Prezi. It uses CSS3 and JavaScript language to complete a presentation layer framework (Demo tool) that can be used by 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.

 

 

 

Demo:

• Official site: http://bartaz.github.io/impress.js/#/overview
• I made the first example: http://guyingsoft.com/gyPage/About/index.html

The mobile phone may not be able to watch it for the time being, because it uses the direction key (forward/→) or the Tab key to switch the playback.

Download the source code of Impress. js from the following, with the Demo of the official website.

If you want to use the example above, you can leave a message in your mailbox.

 

 

 

Preparation:

OK. Everything is ready,

You can use impress. js in seconds.

 

 

 

Step 1:

The Code is as follows:

1 <! DOCTYPE html> 2 
 

 
 
Step 2:
Now we need to create each switch step.
In the div with id impress, create the div of the step to be switched, and the class of the div is "step ".
The div id is optional. If there is no id, It will be executed step by step from the top-down step by default. The access address is as follows: "http ://... /demo.html #/step-1 ". Otherwise, it will be executed in the order of your custom id.
 
The position and size of each slide, the effect of switching, and other attributes are as follows:

 

 
  
Data-x: X coordinate of the slide
 
  
Data-y: Y coordinate of the slide
 
  
Data-scale: scale ratio of the slide display
 
  
Data-rotate: slide Rotation Degree
 
  
Data-rotate-x: Used in 3D. This degree sets the degree of rotation relative to the x axis.
 
  
Data-rotate-y: Used in 3D. This degree sets the degree of rotation relative to the y axis.
 
  
Data-rotate-z: Used in 3D. This degree sets the degree to which it rotates on the z axis.

 
OK. After learning about these attributes, we will start to create the following code. Here I will use the lyrics for the slides:
1. After the impress. js code is referenced, we need to use it to initialize the page to produce the following results:
<1 -- import impress. js -->
<Script type = "text/javascript" src = "impress. js "> </script> <script type =" text/javascript "> impress (). init (); // initialize the Slide step. </script>
 
2. Create the first initial slide. Both data-x and data-y are set to 0, so it will appear in the middle of the page:
<div class="step" data-x="0" data-y="0">    
 
3. We create the second slide. The data-x value is 500, and the data-y value is still 0. So when we switch to the second slide, it will pan to the right and switch to this slide:
<div class="step" data-x="500" data-y="0">    I wanna hold them like they do in Texas Plays.</div>
 
4. Create the third slide below. The data-x is still 500, and the data-y is-400. Therefore, it will pan up to PX and switch to this point:
<div class="step" data-x="500" data-y="-400">    Fold them let them hit me raise it Baby stay with me.</div>
 
4. Does the translation effect feel meaningless? The fourth slide below shows some patterns:
Use data-scale to control the scaling size. Here I set it to 0.5, which indicates that the scaling is half of the original size; data-x is still 500, and data-y is-800.
The Code is as follows:
<div class="step" data-x="500" data-y="-800" data-scale="0.5">    (I love it.)</div>
 
5. In the fifth slide, we use the data-rotate attribute to set its rotation animation.
Here, I set the current data-x to 0, data-y to-800, and data-rotate to 90.
It will install the 90 ° rotation animation. to flip PX left and display the current slide, the Code is as follows:
<div class="step" data-x="0" data-y="-800" data-rotate="90">    Love game intuition play the cards with Spades to start.</div>
 
6. Next, Set data-x to-1200, and data-y to 0, which indicates that the current slide is 800px down from the previous one to the left.
Use data-rotate-x, data-rotate-y, and data-rotate-z to set the rotation angle, and use data-scale to set the zoom ratio to 4 times larger.
The Code is as follows:
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">    And after he's been hooked I'll play the on that's on his heart.</div>
 
7. Now you can open your browser and run the code. Is it quite domineering.
Of course, the interface may be a bit ugly. You can write some styles according to your preferences. If you are too lazy to write, you can also use the following simple styles:
    <style type="text/css">        body{margin:0px; background:#000000; color:#00FF66; font-size: 20px;}        div.step h3{display: inline-block;}        div.step{
                 width:400px; height: 100px; padding-top: 50px; 
                 text-align: center; border:1px solid #00FF66; 
                 box-shadow: 0px 0px 10px #00FF66; border-radius: 20px;
        }        div#overview{border:0px; box-shadow:0px 0px 0px transparent; }    </style>
 
 
OK. Through the above seven small steps, we have completed a simple and crude presentation.
You can also use your unique imagination to create a Web presentation that can scare people.
 
 

 
 
Note:
There is also a global preview effect, that is, to put all the content of all the step blocks in a plane display, the effect is superb.
Here, I create a div with the id of overview after all the steps. As a display block for the overall preview, the scale of the display is increased by three times, the Code such as the location of x and y is as follows:
<div class="step" id="overview" data-x="-200" data-y="-500" data-scale="3"></div>
 

 
 
End:
All the code for this instance is as follows:
1 <! DOCTYPE html> 2 If you still need to check the demo instance that I started with, leave a message.

 
After you make such a simple presentation, remember how it works,Your imagination and creativity are the only decisive factor!
 

 
 
Experience:
Because we are the front-end, it is no good to use the front-end technology to make various attempts. impress can make our presentations more innovative, so it is worth a brief understanding, learning is the best investment.

Advantages:
Disadvantages: