Time for action – creating the underlying markup and basic styling

First we'll look at the HTML that we'll be using in the example and then we'll look at the initial styling added to the elements prior to being skewed.

  1. Add the following code to the <body> of the template file:
    <div id="viewer">
  <div id="flow">
    <img src="img/beatles.jpg">
    <img src="img/blink.jpg">
    <img src="img/doves.jpg">
    <img src="img/flash.jpg">
    <img src="img/floyd.jpg">
    <img src="img/jurassic.jpg">
    <img src="img/naked.jpg">
    <img src="img/prodigy.jpg">
    <img src="img/xx.jpg">
    <img src="img/zabiela.jpg">
  </div>
  <ul>
    <li id="left"><a href="#" title="Move Left">Left</a></li>
    <li id="right"><a href="#" title="Move Right">Right</a></li>
  </ul>
</div>
  2. Save the page as skew.html. Next in ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial