Parallax Scrolling #2 - CSS

[BreyO_o]

Introduction:

This tutorial is the second part of my Parallax Scrolling mini-series tutorial in which we are going to be using CSS styling to style our required tags and classes.

CSS:

CSS is Cascade Style Sheets and are used to styling elements in HTML to make their visual appearance more appealing.

Internal:

I am going to be using internal CSS for this tutorial which means I only require the single HTML page. To achieve this, I am going to write some style tags within my head tags of my HTML page. This is where all the CSS will go...

1. <style type=
   
   'text/css'
   
   >
   
2. </style>
   

Styling:

Now we are ready to begin styling our elements. First we want to set a default margin and padding of 0 pixels (px) to all our HTML elements. This is because some browsers have a default margin/padding of their own (around 20px or so), this will give a white spacing around each HTML element we have, unless otherwise stated - we're setting it to 0 so that disappears...

1. *
   
   {
   
2. margin
   
   :
   
   0px
   
   ;
   
3. padding
   
   :
   
   0px
   
   ;
   
4. }
   

Next we want to style our body tag, this will just have a full width and height of 100% each. This means it will span the entire width and height of the browsers page even if the content is not long enough. We also give it a default grey background so we can see where it is on the page...

1. body {
   
2. width
   
   :
   
   100%
   
   ;
   
3. height
   
   :
   
   100%
   
   ;
   
4. background-color
   
   :
   
   #2e2e2e
   
   ;
   
5. }
   

Now we can start styling our CSS classes. We have two; parallax, and content. Parallax is the div class which will hold the background image we are going to be scrolling up while the content will be scrolling down. (Parallax scrolling can also be used to send the elements in the same direction, but at a different speed)...

1. .parallax
   
   {
   
2. position
   
   :
   
   fixed
   
   ;
   
3. background-image
   
   :
   
   url
   
   (
   
   'http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg'
   
   )
   
   ;
   
4. width
   
   :
   
   100%
   
   ;
   
5. height
   
   :
   
   100%
   
   ;
   
6. background-size
   
   :
   
   100%
   
   500px
   
   ;
   
7. background-repeat
   
   :
   
   no-repeat
   
   ;
   
8. z-index
   
   :
   
   -100
   
   ;
   
9. }
   

Above we are styling our parallax class. This have a background image of the image located at the URL of ('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg'). We are again setting the default width and height of the div, and giving the background image a full width and 500 pixels height.

A few other properties we've not came across yet include position, and z-index. Position: fixed stops the div from automatically scrolling with the page and allows us to position it exactly where we want it in accordance to the users browser - as opposed to the default of relative which just positions the elements according to the other HTML elements located on the page.
Z-index: -100 sets the entire div as a layer to the position of -100. This means that after giving other elements a higher z-index (greater than -100), this div will be behind them. This is important for giving the parallax background effect.

Finally we have to style our content CSS class. This again has a z-index, but this time it is 20. This means it is going to appear in front of our 'parallax' CSS class as the background since it's layer index (20) is greater than the Parallax's z-index (-100).

This content has a width of 980px and it's margin sets it to the middle of the page. All of the text has a font of Verdana, size of 24px, alignment of center (to the div, which is also centered to the middle of the parent body tag, which is set to the full width x height of the users browsers page). The content div also has a default height of 300px and a font colour of #f8f8f8 which is a nice light white/grey/silver.

1. .content
   
   {
   
2. width
   
   :
   
   980px
   
   ;
   
3. margin
   
   :
   
   0px
   
   auto
   
   ;
   
4. color
   
   :
   
   #f8f8f8
   
   ;
   
5. text-align
   
   :
   
   center
   
   ;
   
6. font-size
   
   :
   
   24px
   
   ;
   
7. font-family
   
   :
   
   Verdana;
   
8. height
   
   :
   
   300px
   
   ;
   
9. z-index
   
   :
   
   20
   
   ;
   
10. }
    

Finished!

The next tutorial will be adding the final jQuery code to the HTML page to allow the Parallax scrolling effect to take place!

Download