Parallax Scrolling #1 - HTML

Introduction:

This tutorial is the first of three parts in which I will show you how to create a Parallax effect using HTML, CSS, and the Javascript library jQuery.

What is a Parallax Effect?

A parallax effect is where one element or layer moves in the opposite direction to another element or layer. This can be used in a professional manor for some websites to give a nice, smooth effect to the content.

HTML:

First we need the HTML for our page. Let's write the basc and required HTML template structure... All of our background code and meta data will go in our head tags, while the HTML display elements will go in the body tags. Next we are going to give our page a title just for tutorial's sake... Now we want to create some divs. The first div (below) named 'parallax' will be the area with the background image that will scroll up, while the content in the second div, named 'content' will scroll down... Please note that it is important that our parallax div has the class AND id of 'parallax', the class will be the CSS styling, and the id will be used in jQuery later on. Although, we could technically use the ID to CSS style it. Finally in HTML, we just need to populate our 'content' div with some content. I have just wrote the below line many times over, you can place your official content in there if you wish... What we are trying to achieve with the above code is to make our page long enough to scroll vertically - again, we could make a CSS tweak if needed.

Finished!

The next part will be the CSS styling for our elements; * (all), body (tag), parallax (class), and content (class).