The underlying page requires just four elements (for this simple example), which sit in the <body>
of the page.
Add the elements in the following structure to a fresh copy of the template file, between the
<body>
tag and the first<script>
tag:<div id="background"></div> <div id="midground"></div> <div id="foreground"></div> <div id="ground"></div>
Save this page as
parallax-horizontal.html
in ourjquery-animation
folder.The CSS in this example is equally as simple as the underlying HTML. Add the following code to a new file in your text editor:
div { width:100%; height:1000px; position:absolute; left:0; top:0; } #background { background:url(../images/background.png) repeat-x 0 0; } #midground { background:url(../images/midground.png) repeat-x 0 0; } #foreground { background:url(../images/foreground.png) repeat-x 0 0; } #stage { background:url(../images/ground...