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.
Browser Support »
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.
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”;
→ 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:
→ 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
→ 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.
→ 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 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
We hope you enjoyed this tutorial. Click on the button below to download the demo & code for this tutorial.
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.