To begin, we'll need to add the necessary HTML and CSS to a new document.
Create a new HTML page using the same template as before and insert the following code into the
<body>
:<div class="row row1"> <img src="images/image1.png"> </div> <div class="row row2"> <img src="images/image2.png"> </div> <div class="row row3"> <img src="images/image3.png"> </div>
Save the page in the
jquery-animation
directory asparallax-vertical.html
.Next, we should create the stylesheet that we just linked to. In a new file, add the following code:
html, body { margin:0; padding:0; } img { display:block; width:1000px; margin:0 auto; padding-top:200px; } .row { height:700px; } .row1 { background:url(images/background1.jpg) repeat-x top center fixed;} .row2 { background:url(images/background2.jpg) repeat-x top center fixed;} .row3 { background:url(images/background3.jpg) repeat...