Demand
To see the effect, use Google Chrome or Safari (or Firefox or IE10). Impress.js is not currently compatible with earlier versions of Firefox or Internet Explorer.
Create
First, you create a Web page. The page I created is as follows:
<!doctype html>
<title>impress tutorial</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<body>
</body>
Add the Impress.js file before </body>, and import impress.js into your project
<script type= "Text/javascript" src= "Impress.js" ></script>
Next, create a div container with ID impress to wrap this slide,
<div id= "Impress" >
</div>
Create slides
In a personal presentation, you'll see how easy it is to create a slide show. Each slide is a DIV element with class for step (wrapped in a container with ID impress)
(ps:<div> ID is optional, when there is an ID, the hash change in the URL goes with the ID; otherwise it is step-[num], such as)
<div class= "Step" >
My I-Slide
</div>
When you create a slide, you add some data properties. The following are some of the data properties available:
Data-x = x coordinate of the slide
Data-y = the y-coordinate of the slide
Data-z = Z coordinate of slide
Data-scale = by specifying a value for scaling, Data-scale 5 will magnify 5 times times the original size base of your slides
Data-rotate = Rotate your slides by a number of degrees
Data-rotate-x = for 3D, this number is the degree to which it should rotate relative to the x axis. (leaning forward/backward)
Data-rotate-y = 3D, this number is the degree to which it should rotate relative to the Y axis. (Left pendulum/Right pendulum)
Data-rotate-z = 3D, this number is the degree to which it should rotate relative to the z axis.
Make Data properties work
The next slide setup will guide you through the understanding of each data attribute
Starting with an initial slide, this slide has set its data-x and data-y data properties to 0, so it will appear in the middle of the page.
<div class= "Step" data-x= "0" data-y= "0" >
This is my slide (displayed)
</div>
The second slide has a data-x value of 500 and a data-y value of 0, where it moves to the Zopping (sliding) 500px.
<div class= "Step" data-x= "data-y=" -400 ">
This is slide 2
</div>
The third slide has the Data-x value unchanged and the data-y position is 400, which will slide from the top 400px to the screen.
<div class= "Step" data-x= "data-y=" -400 ">
This is slide 3
</div>
The four slides have a twist, using the value of Data-scale to control the size of the thumbnail. Data-scale= "0.5″ indicates that it should be half the size, and when it becomes an active demo, it will adjust all slides by the necessary multiples, starting from this gorgeous step
<div class= "Step" data-x= "data-y=" -800 "data-scale=" 0.5 ">
This is slide 4
</div>
Slide Fifth 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 diao ha
<div class= "Step" data-x= "0" data-y= " -800" Data-rotate= ">"
This is slide 5
</div>
Slide sixth begins with 3D style, which specifies the rotation properties (x,y,z) for the axes of each dimension. The x-axis is the horizontal axis, which means that you can tilt things (positive values) or back (negative), the y-axis is the vertical axis, so you can swing things to the left (negative values) or to the right (positive values), and the z-axis is the vertical axis, which will be the things that rotate up (negative) and downward (positive values).
<div class= "Step" data-x= " -2600″data-y=" -800″data-rotate-x= "30"
Data-rotate-y= " -60″data-rotate-z=" data-scale= "4" >
This is slide 7 and it has a 3D transition and a scale.
</div>
Downgrade for browsers that do not support impress.js
Add the following div before <div id= "Impress" >
<div class= "No-support-message" >
Your Browser doesn ' t support impress.js. Try Chrome or Safari.
</div>
Then add the following styles to your style sheet:
. no-support-message {Display:none}
. impress-not-supported. no-support-message {display:block;}
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
