Twitter Facebook RSS Logo

Parallax Scrolling Effect With CSS & jQuery

15 Comments

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.

Parallax Scrolling Effect using CSS & jQuery

View Demo Button

Browser Support »

Language » CSS2, HTML4 & jQuery

Difficulty » Intermediate

Estimated Completion Time » 20 minutes

Steps to Create the Parallax Scrolling

→ 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.

Download & Include jQuery

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:
View Demo Button

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 “http://code.jquery.com/jquery-latest.js”;

View Demo Button

Download & Include jQuery UI

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:

View Demo Button

Create the Pages

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>.

Here’s the Html code

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.

View Demo Button

Create the Navigational Links

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’s the Html code

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.

View Demo Button

Style the Pages, Background and Navigational Menu using Stylesheet

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.

Here’s the CSS Stylesheet code

View Demo Button

 

jQuery Code for the Parallax Scrolling

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">.

Here’s the jQuery code

View Demo Button

The Explanation

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.

download the demo

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.

LayerSlider - The Parallax Effect Slider - CodeCanyon Item for Sale

Posted on March 23, 2012 in Tutorials, tagged , , , by EntheosWeb
Tweet, Share or Comment on this page if you found this tutorial or resource useful!
Subscribe to the RSS feed or to email updates, to get even more great content!

15 thoughts on “Parallax Scrolling Effect With CSS & jQuery

  1. Thank you for this easy to follow tutorial on Parallax scrolling to create a smooth slider effect to navigate between page content. The minimal amount of code and older languages of CSS2 and HTML4 will make this very cross browser compatible as well as lightweight on page load times. Normally I am put off by the sheer amount of code, configuration and styling needed, however having seen this simple tutorial I will definitely be booking this page!

  2. Thanks for the easy to follow tutorial on making a content slider. I wanted to point out, however, that this is not really Parallax Scrolling – it’s just animating. Parallel Scrolling refers to having objects on the page, and or background images scroll at different speeds in relation to each other, creating the illusion of depth.

  3. It’s amazing that all these things that were done in Flash before are now done in CSS3. Thanks for sharing.

    I really like the parallaxr theme…

    • I really love the horizontal scrolling and the animating background color. I did have a question though, I followed the demo and it worked perfectly but i run into problems with i add more than 3 pages. My goal was to have 5 pages, so 5 different div’s but when i add the 2 other div’s they appear on top of the first 3 pages Any ideas?

  4. Hey this is awesome..really liked it.But i have one problem.If i add more den 3 pages den the scroll doesnt work for the new pages.Can u tell me how it can be done.
    Keep up the gud work

  5. Hi,
    Really nice and simple!
    I would like to use a background through all the site, that when changing the page, it will display another part of it.
    Please help!
    Thanks for the tut!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Featured Templates

Subscribe to New Posts

Enter your email address:

Delivered by FeedBurner