In this tutorial you will learn how to create a parallax scrolling effect using CSS & jQuery. This is a growing trend now in website design with many single page websites using this technique to create interesting and interactive websites.
Browser Support » 
Language » CSS2, HTML4 & jQuery
Difficulty » Intermediate
Estimated Completion Time » 20 minutes
→ Download and include jQuery.
→ Download and include jQuery UI.
→ Create the Pages using <div>.
→ Create the Navigational Links using <ul>.
→ Style the Pages and Navigational Buttons.
→ Customize the jQuery Code for the Parallax Scrolling Effect.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is a lightweight “write less, do more” JavaScript library.
Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading).
Both versions can be downloaded from › jQuery.com ‹.
We will have to include jQuery inside the <head> tags.
Here’s the code:
There’s an alternate way to include jQuery Library on the webpage without downloading jQuery file.
This can be done by adding src attribute to the script tag.
Set the value of src attribute to “https://code.jquery.com/jquery-latest.js”;
jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessiblity, flexible styling, and user-friendly design. All plugins are tested for compatibility in IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, and Google Chrome.
Both versions can be downloaded from › jQueryui.com ‹.
We will have to include jQuery Ui inside the <head> tags.
Here’s the code:
First we will create the Page Container Div <div id="container">.
This Page Container will contain another <div id="all_pages">, which contains all the pages is separate<div>.
In this example we will make three Separate Pages Home, About and Contact Us page.
Each Page is contained inside a separate <div>.
Here the Home Page <div> is placed first, then the About Us Page and then Contact Us Page. This order must be same as the Navigation links which we will create in the next Step.
The Parallax Scrolling Effect will be executed when we click on these links.
These links are created using <ul> tags, with each <li> having same class="link" and separate id's.
Here we have created a <div id="menu"> that contains the Navigational Link <ul>.
We will use id="menu" later for positioning the Navigational Links later using CSS Stylesheet.
The id's will be numerical values which denotes the Page number.
Here the Home Page link has id="1". When clicked on this link, the first <div> will scroll into view.
The Links have two classes separated by space.
The first class is the “link” and the second class is “Hex Color Code”. The class="link" is compulsory, required for the Parallax scrolling.
The second class is the “Hex Color Code” which assigns the color to the background of the Page (<body> tag ).
The First link Home has another class="active" which highlights the link. When clicked on another link this class="active" will be assigned to it. Which makes the Active link highlighted.
For the Parallax effect we need to position the pages one after another to view each page one by one.
For arranging the pages side by side we will use the CSS float:left property.
After arranging the Pages we need to hide the other two pages when one page is viewed.
For this we will have to create a mask that allows us to see only that content which is inside the mask.
Here we will use <div id="container"> as the mask .
For the masking effect we will use the overflow:hidden CSS property for id="container".
For the scrolling effect we will scroll the pages with respect the <div id="container">.
For this we will use the position:relative CSS property for <div id="container"> and position:absolute for the <div id="all_pages"> containig all pages with <div>.
This way only the Pages <div id="all_pages"> will scroll with all the <div> inside it.
We have also used the background CSS property for the <body> tag to fill it with background.
This code will take the check the id for the “Page no” and the last six characters of the class for the “Page Background Color”.
This code will also highlight the clicked link by assigning class="active" to the clicked link.
For the Parallax Scrolling Effect we will use the jQuery’s animate property to animate the <div id="all_pages">.
Line 3 › $(document).ready(function(){
→ For executing code when a page is rendered completely.
Line 5 › $(".link").click(function(){
→ This is a On Click listener for the class="link".
Line 6 › var page = $(this).attr("id");
→ This statement will fetch the value of the attribute id from the clicked link.
→ This value is then assigned to the variable page.
→ This value will be used for scrolling to the respective page.
Line 7 › var color = $(this).attr("class");
→ This statement will fetch the value of the attribute class from the clicked link.
→ The value will then be assigned to the variable color.
Line 8 › color = color.substr(5,6);
→ This statement will extract the last six characters from the variable color using substr function.
→ This way we can get the “Hex Color Code” for the <body> Background Color.
Line 9 › $('#all_pages').animate({left: (page-1)*(-1000) });
→ This statement will animate the <div id="all_pages".
→ Here page is the variable which we defined earlier on line 6.
→ The <div id="all_pages" will be positioned from the left according the page number
Line 10 › $("body").animate({backgroundColor: '#'+color});
→ This statement will set the Background Color to the <body> .
→ Here color is the variable which we defined earlier on line 7 and 8.
→ The Background Color won’t change unless we include the jQuery UI script in our webpage.
Line 11 › $("#menu ul li").removeClass('active');
→ This statement will remove the class="active" from the Navigational Menu Items.
Line 12 › $(this).addClass('active');
→ This statement will assign class="active" to the clicked link.
Recommended! Awesome Ready-made Parallax Effect Slider
LayerSlider – The Parallax Effect Slider
This is a jQuery content slider using the parallax-effect. You can create as many layers and sublayers as you want. You can use images or any other HTML elements, including Flash movies as layers. The script is very user-friendly, you can add global settings or local (per slide) settings to each layer or sublayer. You can change delay times, easing types, durations and much more.
