Blog is a rest for half a year, slightly ashamed... Holiday season all kinds of comfortable: playing Dota (less miserable to lose to win more), smooth skiing; Eat something and go shopping. Turned into will have to work today, get up early at five (recently insisted that early to bed and early to rise), couldn't help sharing the front-end engineers that paragraph of time found that hold the weapon X, so that the first post in the New Year is born:)
you want others to see your presentation will issue &other; Wow” ? Do you want to use the gorgeous effect to shock your audience? Let's look down
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the body line -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
overview
code is as follows:


<! DOCTYPE html>
<Html>
<Head>
<Title> Darren - Impress demo
<Meta HTTP - equiv="content-type" content="text/HTML; charset=utf-8" >
<The link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet"/>
</head>
<Body>
<Div class=", "out-there" - not - supported ">
</div>
<Div id="impress" >
</div>
<Script SRC="http://bartaz.github.com/impress.js/js/impress.js" ></script>
<Script> "Out-there" (). The init (); </script>
</body>
</html>

within the wrapper to create a slide show only need to create a new class=" Step" The <Div> Is ok. <Div> The id of the dispensable, when have a id in the url hash change is follow id; Vice is step - (num), such as

  code is as follows:  


<Div class="step" >
the first slide
</div>

data attributes: size, used to describe the slide switch, etc.
data - x coordinates of x=slide
data - y=y slides
data - scale=by specifying a value for scaling, data - scale to 5 slides will be in your original size amplification 5 times
data - rotate=via a digital readings to determine the rotation of your slides
data - rotate - x=to use 3 d, this degree is how it should be relative to the x axis rotation. (forward/backward)
data - rotate for 3 d - y=, and in this digital degree is how it should be relatively y axis rotation. Pendulum is/right (left)
data - rotate for 3 d - z=, and in this digital degree is how it should be relative to the z axis rotation. Created

code is as follows:


<Div class="step" data - x="0" data - y="0" >
This is slide 1 - [title]
</div>

the second slide of data - x value is 500, data - y value is 0, when it will be 500 px translation (slip) to the left.

  code is as follows:  


<Div class="step" data - x="500" data - y="400" >
This is
slide 2 </div>

the third slide its data - x values, data - for - 400 y position, it will slide into the screen from the top 400 px.

  code is as follows:  


<Div class="step" data - x="500" data - y="400" >
This is
slide 3 </div>

4 slides to a new pattern, use the data - the value of the scale control its scale size. Data - scale=" 0.5 " Said it should be half the size, when it becomes activities demonstrate multiple will through the necessary adjust the scale size of all slides, from this gorgeous step start

  code is as follows:  


<Div class="step" data - x="500" data - y="800" data - scale="0.5" >
This is
slide 4 </div>

the fifth slide rotation attribute allows you to rotate one slide to the current view, slide 5 is set to rotate 90 degrees, the visual effect of micro diao,

  code is as follows:  


<Div class="step" data - x="0" data - y="800" data - rotate="90" >
This is
slide 5 </div>

6 slides begin 3 d style, can be specified for each dimension of shaft rotation attribute (x, y, z). X is inverse, which means you can make things backward tilt (positive) or (negative), and the y axis is vertical axis, so you can make things swing (negative) to the left or right (positive), z axis is vertical, it will be rotate something up (negative) and down (positive).

  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" >
This is
slide 6 </div>

6 slides over the data attribute values all over again, in a slightly high presentation appeared in front of our eyes. You can with your imagination with magical and amazing way to merge these effects to create your own powerpoint presentation style.

overall preview individual great the visual experience, all the slides parallel display, reasonable arrangement will be very handsome, is way behind the 6 slides inserted section of HTML.

  code is as follows:  


<Div id="overview" class="step" data - x="200" data - y="500" data - scale="3" ></div>

as you slide the location of the preview is different so the global value will be different, with the end of the demo adjustment to find feeling little by little, I hope you'll like it!
please remember it, after the completion of it is not limited to, the only limitation is your creativity! Personal experience

code is as follows:


<! DOCTYPE html>
<Html>
<Head>
<Title> Darren - Impress demo
<Meta HTTP - equiv="content-type" content="text/HTML; charset=utf-8" >
<The link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet"/>
</head>
<Body>
<Div class=", "out-there" - not - supported ">
<Div class="fallback - the message" >
<P> Your browser <B> Does not support </b> Impress. Js, so the current display is a simplified version. </p>
<P> In order to obtain better experience, please use the latest <B> Chrome , <B> Safari Or <B> Firefox The browser. </p>
</div>
</div>
<Div id="impress" >
<Div class="step" data - x="0" data - y="0" >
Darren code - [title]
</div>
<Div class="step" data - x="500" data - y="0" >
This is
slide 2 </div>
<Div class="step" data - x="500" data - y="400" >
This is
slide 3 </div>
<Div class="step" data - x="500" data - y="800" data - scale="0.5" >
This is
slide 4 </div>
<Div class="step" data - x="0" data - y="800" data - rotate="90" >
This is
slide 5 </div>
<Div class="step" data - x="1200" data - y="0" data - rotate - x="30" data - rotate - y="30" data - rotate z="90" data - scale="4" >
This is
slide 6 </div>
<! - darren code >
<Div id="overview" class="step" data - x="200" data - y="500" data - scale="3" ></div>
</div>
<Script SRC="http://bartaz.github.com/impress.js/js/impress.js" ></script>
<Script> "Out-there" (). The init (); </script>
</body>
</html>

suddenly remind of a word as the article summary: &other; When you have a hammer, you see nothing like nail &throughout; .
if you find these articles also calculate, please excuse me recommended in the lower-right corner of the window.
2013.1.4, is today a day of backpacks, don't know how many people will go to register today ah, envy ing& said; Bless ing... I also work hard, hoho
I wish you all a happy 2013, smoothly.
# 0 - #


This concludes the body part