Parallax scrolling

What is parallax scrolling effect?

Parallax scrolling Effect is new trend in web designing. It involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. Using different effects or creating the web pages more attractively is a tough task. Effects added in web pages makes the visitor to see the complete page and see the way things are presented. So, as all of us know, parallax effect has good role in web page development.

Have you ever tried parallax effect in your website? Do you know how to create it? If not, let us create a simple web page with parallax scrolling effect with the help of jquery and css.

As the new trends come, we are tempted to use those in our web page developments.Your clients will be looking for something awesome from you, some effects which make the visitors say “Wow!’. So, obviously learning something new, awesome and latest trends and implement them in development is always good.

How to make parallax scrolling effect?

We have seen quite a lot of examples for parallax scrolling. But here, in this tutorial, we will see how to create a web page with parallax scrolling effect with very minimum code. We use only jquery plugin, few lines of css and few lines of HTML.

A simple html page with html, header and body tag is the prerequisite for our parallax scroll effect web page. Add jquery latest version in the header section of the HTML page. Now the initial set up is ready for you web page.

HTML for scrolling

The following HTML can be added to the basic HTML which we already created.

<div id="wrapper">
 <div id="header">
 <div class="site-title">
 <a rel="home" title="CSS STARS" href="http://css-stars.com/">CSS STARS</a>
 </div>
 </div>
 <section id="div_one">
 <h2>First Section Header</h2>
 </section>

 <section id="div_two">
 <h2>Second Section Header</h2>
 <p>Second Section content goes here... Second Section content goes here... Second Section content goes here...</p>
 </section>

 <section id="div_three">
 <h2>Third Section Header</h2>
 <p>Third Section content goes here... Third Section content goes here.. Third Section content goes here.. Third Section content goes here..</p>
 </section>
 </div>

See the HTML code, we have added a ‘header’ and ‘section’ tag is used for understanding each section. We have added 3 sections. And each section have some content inside it. Now HTML is ready. So we will add the css

CSS for parallax scrolling

body {
        margin:0px; auto;
        padding:0px;
        text-align:center;
        font-family:helvetica;
        color:white;
    }
    #wrapper {
        position:relative;
    }
    #header {
        position:fixed;
        color:white;
        background: #000;
        right: 0;
        left: 0;
        top: 0;
        text-align: left;
        padding: 20px 2%;
    }
    #wrapper section {
        height: 750px;
    }
    #wrapper h2 {
        margin:0px;
        text-align:center;
        padding-top:250px;
        font-size:50px;
        text-shadow: 2px 2px 3px #000;
        color: #F74949;
    }
    #wrapper p {
        font-size: 22px;
    }

    #div_one {
        background:url("image-1.png") no-repeat;
    }
    #div_two {
        background:url("image-2.jpg") no-repeat;
    }
    #div_three {
        background:url("image-3.jpg") no-repeat;
    }
    #div_one, #div_two, #div_three {
        background-attachment:fixed;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width:100%;
    }

The header part is position fixed, so that it will not scroll even if the section is scrolling. For each section a background is added with css and position is fixed with background-size as 100%. So it will be 100% in any resolution.

Jquery

Now we will add the script which is not the least part, but few lines of script which helps to add the scrolling effect to the web page.

$(window).scroll(function () {
      var yPos=-($(window).scrollTop() / 6);
      if($(window).scrollTop()>100) {
        document.getElementById("div_one").style.backgroundPosition="100% "+yPos+"px";
      }
      if($(window).scrollTop()<100) {
        document.getElementById("div_one").style.backgroundPosition="100% 100%";
      }
    });

Now our page is ready with the parallax scrolling effect. Watch the demo and try to implement in your own way.

What is parallax scrolling effect?