JavaScript

Basics of creating Parallax Effect using HTML CSS and JavaScript

In this article I'll explain what a Parallax is? What does it mean? How to create one from scratch? There're so many JS libraries out there that I used to the effect in action but I never thought of getting into the basics of its What & How. Trust me, it's that simple. Let's move ahead and explore what's in there. This article is useful for all Beginners in Web Design & Development.

What is Parallax?

Definition: The effect whereby the position or direction of an object appears to differ when viewed from different positions.

Well, that's a bit tough to understand what exactly a Parallax mean. Putting it simple, Imagine you're in a forest. You know how when you move sideways and look at the trees, the ones at the distance seem to move at a different rate (slower) than the ones near you?

Another easy way to understand this is to hold your index finger about 6 inches from your face. Look at it with just your right eye, then just your left eye, and notice how its position changes with respect to the
background.

Or, when you play old side-scrolling video games, the backgrounds will have three layers that move at different speeds to make it look like you're moving?

That moving of different layers at different speeds effect is parallax. I hope now you understand what does that heavy word mean? Okay, let's move now and see what composes a parallax.

What is takes to create a Parallax?

Practically a parallax is composed of more than one layer in parallel, moving along on scroll at different speeds, giving us the feel that they're at different distance. You're free to add as many layers to create a parallax but more than one. CSS is there to do all the layers for you and JavaScript will update the CSS values every time you scroll through the contents. That's all it takes to create it. Let's see now how we do it with a demo.

Demo: How we do it?

I will take two layers for demo purposes (you may include as many as you want as I explained earlier).



Here you can see I've two divs having class "background" for background layer and "contents" for the layer on top.

I'm going to include more contents to "contents" div so that we can have the space to scroll. Below is the CSS which does all the magic of creating the layers from the two Divs above:



So, to reveal the secret behind, we fix the layers in background using CSS and later increase/decrease the at a desired rate on scroll. That's all a parallax has to do with it.

Finally, the JavaScript which make the effect come into picture:



Here I've a function named "parallax" which updates the "top" CSS property for fixed layer which is in background as per the scrolling has been done. Later I bind this function to "onscroll" event of window object so that it does the magic.
 
I've used lorempixem.com for sample images that you see appearing in background.

Here's the complete code:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Parallax Sample</title>  
  5.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  
  6.     <style type="text/css">  
  7.         .background  
  8.         {  
  9.             background: url('http://lorempixum.com/1024/768') repeat;  
  10.             position: fixed;  
  11.             width: 100%;  
  12.             height: 300%; /* adjust the height according to the length of contents */  
  13.             top: 0;  
  14.             left: 0;  
  15.             z-index: -1;  
  16.         }  
  17.         .contents  
  18.         {  
  19.             color: #fff;  
  20.             font-family: arial;  
  21.             width: 600px;  
  22.             margin: auto;  
  23.             line-height: 20px;  
  24.             font-size: 16px;  
  25.         }  
  26.     </style>  
  27.     <script type="text/javascript">  
  28.         function parallax() {  
  29.             var scrolled = $(window).scrollTop();  
  30.             $('.background').css('top', -(scrolled * 0.2) + 'px');  
  31.         }  
  32.         $(window).scroll(function () {  
  33.             parallax();  
  34.         });  
  35.     </script>  
  36. </head>  
  37. <body>  
  38.     <div class="background">  
  39.     </div>  
  40.     <div class="contents">  
  41.         <div>  
  42.             <p>  
  43.                 Sample Image</p>  
  44.             <img src="http://lorempixum.com/300/200/sports" />  
  45.         </div>      
  46.     <div>  
  47.         <p>  
  48.             Sample Image</p>  
  49.         <img src="http://lorempixum.com/300/200/sports" />  
  50.     </div>  
  51.     <div>  
  52.         <p>  
  53.             Sample Image</p>  
  54.         <img src="http://lorempixum.com/300/200/sports" />  
  55.     </div>  
  56.     <div>  
  57.         <p>  
  58.             Sample Image</p>  
  59.         <img src="http://lorempixum.com/300/200/sports" />  
  60.     </div>  
  61.     <div>  
  62.         <p>  
  63.             Sample Image</p>  
  64.         <img src="http://lorempixum.com/300/200/sports" />  
  65.     </div>  
  66.     <div>  
  67.         <p>  
  68.             Sample Image</p>  
  69.         <img src="http://lorempixum.com/300/200/sports" />  
  70.     </div>  
  71.     <div>  
  72.         <p>  
  73.             Sample Image</p>  
  74.         <img src="http://lorempixum.com/300/200/sports" />  
  75.     </div>  
  76.     <div>  
  77.         <p>  
  78.             Sample Image</p>  
  79.         <img src="http://lorempixum.com/300/200/sports" />  
  80.     </div>  
  81.     <div>  
  82.         <p>  
  83.             Sample Image</p>  
  84.         <img src="http://lorempixum.com/300/200/sports" />  
  85.     </div>  
  86.     <div>  
  87.         <p>  
  88.             Sample Image</p>  
  89.         <img src="http://lorempixum.com/300/200/sports" />  
  90.     </div>  
  91.     </div>  
  92. </body>  
  93. </html>  

Hope you enjoyed this article. Thanks for reading :)
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs