Once again, we'll create the example page and basic styling first and add the script last.
The underlying HTML for this example is very light. All we need in the
<body>tag of our template file are the following elements:<div id="frame"> <img class="visible" src="img/F-35_Lightning.jpg" alt="F-35 Lightning"> <img src="img/A-12_Blackbird.jpg" alt="A-12 Blackbird"> <img src="img/B-2_Spirit.jpg" alt="B-2 Spirit"> <img src="img/SR-71_Blackbird.jpg" alt="SR-71 Blackbird"> <img src="img/F-117_Nighthawk.jpg" alt="F-117 Nighthawk"> </div>Save this page as
advanced-transitions.html.Like the markup, the CSS we rely on for a plugin should also be as minimal as possible. Luckily, not much CSS is required for our small collection of elements.
Add the following code to a new file in your text editor:
#frame { position:relative; width:520px; height:400px; z-index:0; }...