jQuery 1.4 Animation Techniques - Index of

[ 249 ]
Chapter 9
Left
Right
2. Save the page as skew.html. Next in a new file add the following code:
#viewer {
width:700px; height:220px; padding:100px 0 30px; margin:auto;
border:1px solid #000; position:relative;
}
#flow:after {
content:""; display:block; height:0; clear:both;
visibility:hidden;
}
#flow img {
display:block; margin-left:-165px; position:relative; top:-15px;
left:245px; float:left; background-color:#fff;
}
#viewer li { list-style-type:none; position:absolute; bottom:10px;
}
#left { left:20px; }
#right { right:20px; }
3. Save this file in the css directory as skew.css.
What just happened?
We're using a simple collection of elements for this example. We use an outer container,
mostly for positioning purposes so that we can center the widget in the viewport and
position other elements within it.
The elements are what we will be applying the skew animations to, so these are
isolated in their own container to make selecting them in the script later on easier. We
also have a list element containing two links. These will be used to trigger the animations.
The CSS is as light as the HTML. We simply position the container, the images, and the
controls as required for the example. All of the fun CSS3 we'll set and manipulate using
the script. You should note that this example isn't progressively-enhanced as this would
deviate too far from an already quite large example, as we'll see in a moment when we
add the JavaScript.