Submit your widget

Cool jQuery Parallax Scrolling Technique

Created 4 years ago   Views 28446   downloads 3953    Author tutsplus
 Cool jQuery Parallax Scrolling Technique
View DemoDownload 678.7 KB
44
Share |

A Simple Parallax Scrolling Technique,Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth.

Step 1: The Markup

This technique revolves around controlling the speed of background image. So let's begin with the HTML markup, creating two sections along with the required attributes:"data-type" and "data-speed". Don't worry; I'll explain these later.

<section id="home" data-type="background" data-speed="10">                            
</section>   
     
<section id="about" data-type="background" data-speed="10">
</section>

we  using the <section> tag with the attributes data-type & data-speed, which were introduced in HTML5. This makes the HTML markup cleaner and easier to read.

According to the specification for Custom Data Attributes, any attribute that starts withdata- will be treated as a storage area for private data. Additionally, this won't affect the layout or presentation.

Since all we need to do is control the speed of the background images, we'll use data-type="background" and data-speed="10" as key attributes to specify the necessary parameters.

we know what you're thinking: you're worried about IE. Never fear;we have a workaround for that too! We'll discuss it momentarily.

Read more:http://code.tutsplus.com/tutorials/simple-parallax-scrolling-technique--net-27641