How to Parallax using jQuery

Jul 04, 2016

Parallax is an awesome effect that is suprisingly easy to accomplish. In this short tutorial, I will show you how to scroll the background of an element at a different pace than that of the web page. For an example of the code, check out this page. Ok, let's get into it.

For this I am going to assume that you have a basic knowledge of how to set up a simple web page using HTML CSS, and JavaScript. First, let's set up the HTML element that we will be using for our parallax effect.

<div id="parallax">
  <h1>Parallax</h1>
</div>

Simple, right? We are just setting up a div with an id of parallax. This will come in handy for the CSS and the the JavaScript. We also set up a h1 tag, just to give a little more depth to the effect.

Now let us set up some styles. I won't show positioning of the h1, because it is not essential for the effect. You can place it anywhere you please. If you look at the example, I have centered it. On to the styles.

#parallax {
  height: 500px;
  background: white;
  background-size: cover;
  background-image: url('/images/your-image-here.jpeg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0% 0%;
}

Let me explain what I am doing here. First, I'm setting the height of our element to 500px. You can set it to any number you choose; I just chose this number because I like the way it looks. Then I'm setting the background color and image. Again, these can be whatever you want. Next, I'm setting the repeat to no-repeat, because we don't need the image to repeat over and over again. Now I set the attachment to fixed. This way, even if someone has his or her JavaScript turned off, he or she will still get a nice scroll over the image effect. Finally, the important part, setting the position of the background. You'll notice I used percentages. This was intentional. When it comes to the JavaScript, it is extremely easy to alter numbers. You will see why this comes in handy once we get to the JavaScript, which is coming up right now.

$(window).scroll(function(){
  // Sets the current scroll position to a variable
  var wScroll = $(this).scrollTop(),
      $parallax = $('#parallax'),

    $parallax.css({
      // This changes the background-position CSS. Will explain
      // after the code.
      backgroundPosition: '0% ' + (wScroll / 2) + '%'
    })
  }

})

What this code is doing, is firstly setting the background x-axis to 0%. This is the same value that it was in the CSS. The second, and more important part, is taking the wScroll variable and dividing it by 2. Then, it is being added to the backgroundPosition string as the new y-axis. So now when you scroll the page down, the background of the #parallax element will also scroll, but at a different pace than the window.

WARNING: I am using this to scroll the background of a hero element at the absolute top of the webpage. If you want to scroll the background of an element positioned somewhere else on the page, you might have to fiddle with a few extra numbers.

Well, that is it. I hope now you see how simple it is to add a parallax effect to your web pages. Have fun with this and experiment with different speeds, directions, and elements. This basic code will get you started and it is up to you to take it to the next level