Learn how to create an awesome single page website design with multilayered parallax scrolling animation using css and jquery. In this tutorial you will learn how to create animated clouds in the backgrond, a moving hot air balloon in the foreground and animated links & titles.

You can also download the free zip file at the end of the tutorial for the css & jquery code.

demo
demo

Browser Support » demo_sliding_gallery_btn

Language » CSS2, HTML4 & jQuery

Difficulty » Intermediate

Estimated Completion Time » 15 minutes

Steps to Create the Parallax Scrolling

→ Download and include jQuery.
→ Download and include jQuery UI.
→ Create the Clouds and the Balloons <div>.
→ Create the Navigational Links using <ul>.
→ Style the Clouds, Balloons and Navigational Links.
→ 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:

jQuery_coding

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_coding

 

→ 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, accessibility, 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:

jQuery_coding

→ Create the Clouds and the Balloons

Here we will create four <div> and position them relative to the <div id="wrapper">.
We will assign the different id's to these four <div> .
For the Balloon we will use <img> tag.
This image has an id balloon

Multilayered Parallax Scrolling using CSS & jQuery jQuery_coding

→ 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="animate" and separate id's.
Clicking on the links will trigger the <div id="content"> to change its contents with the content related to the clicked link.
Include this html code inside the <div id="wrapper"> tags.

jQuery_coding

→ Style the Clouds, Balloons and Navigational Links

We will use the cloud images as background images for the <div> with "cloud, content and bottom_cloud" id’s.
For this Parallax Effect we will change the Background Position of these <div> using jQuery.
We will position the navigational menu at the top and add cloudy background to it.
Then we will position some clouds near the top.
Then we will position the content Cloud that scrolls every time you click on the navigational link and show the content related to clicked link.

We have also used the background CSS property for the <body> tag to fill it with background.

Here’s the CSS Stylesheet code

jQuery_coding

→ jQuery Code for the Parallax Scrolling

This code will animate the Balloons and the Clouds.
The Clouds at the Top and Bottom will slide to the left on every click of the menu item.
The sliding speed is different for the Top Cloud and the Bottom Cloud.
For the Parallax Scrolling Effect we have used the jQuery’s animate property to animate the backgrounds of the clouds <div>.
The function theContent(id) will change the content of the <div id="content">.
We have defined the variables like home_content, about_content and contact_content,
you can use html tags to show whatever you want in that scrolling content cloud.
The function balloon() will animate the balloon when the page loads.

Here’s the jQuery code

jQuery_coding

We hope you enjoyed this tutorial. Click on the button below to download the demo & code for this tutorial.

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

Pinterest