Time for action – creating and styling the page

In this part of the example we'll create the underlying page that the animation will run on and add the styling.

  1. First we'll create the default page and add the CSS for the example. Add the following elements to the <body> of our template file:
    <div id="proximity"> <img src="img/proximity1.jpg" alt="CH-47 Chinook"> <img src="img/proximity2.jpg" alt="Mi-24W"> <img src="img/proximity3.jpg" alt="Mil Mi-24A"> <img src="img/proximity4.jpg" alt="AH-1J Cobra"> <img src="img/proximity5.jpg" alt="Mi-24P"> <img src="img/proximity6.jpg" alt="AH-1Z Viper"> <img src="img/proximity7.jpg" alt="AH-1W Cobra"> <img src="img/proximity8.jpg" alt="UH-1Y Huey"> <img src="img/proximity9.jpg" alt="AH-64 Apache"> <img src="img/proximity10.jpg" ...

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.