Parallax div element’s scrolling effect with jQuery using CSS transform

Give floating parallax effect to div elements by manipulating the elements’ y-position with jQuery and CSS transform.

You must have seen this effect on many websites as it’s very popular, and I will show you how it can be done.

I will firstly set up very simple HTML markups and CSS styling to create a scrolling space for two div elements. One for normal scrolling and another for parallax scrolling, so the effect can be effectively demonstrated.

1
2
3
4
5
6
7
8

<div class="section">
  <div class="column">
    Normal scroll
  </div>
  <div class="column parallax_scroll">
    Parallax scroll
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.section {
  display: flex;
  height: 200vh;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.column {
  width: 120px;
  height: 120px;
  background-color: #828282;
  color: #ffffff;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 20px;
}
.parallax_scroll {
  background-color: #f58232;
}

I’ve basically made a section with twice the height of window to make it scroll, and located two columns in the middle side by side. It will look like the image below. At the moment the two columns scroll in a same speed.

Next I will add the magic jQuery to the orange column, so its y-position will change while scrolling and that will create a parallax scrolling effect. See the jQuery snippet below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$(document).ready(function() {
  //parallax scroll
  $(window).on("load scroll", function() {
    var parallaxElement = $(".parallax_scroll"),
      parallaxQuantity = parallaxElement.length;
    window.requestAnimationFrame(function() {
      for (var i = 0; i < parallaxQuantity; i++) {
        var currentElement = parallaxElement.eq(i),
          windowTop = $(window).scrollTop(),
          elementTop = currentElement.offset().top,
          elementHeight = currentElement.height(),
          viewPortHeight = window.innerHeight * 0.5 - elementHeight * 0.5,
          scrolled = windowTop - elementTop + viewPortHeight;
        currentElement.css({
          transform: "translate3d(0," + scrolled * -0.15 + "px, 0)"
        });
      }
    });
  });
});

• Line 4 – Fix the class of the element to have parallax effect.
• Line 12 – Determines where the parallax element is vertically aligned with non-parallax elements. 0.5 for vertical center of the window.
• Line 15 – Manipulates the position of the parallax element. Changing the number value will effect the parallax element’s scrolling speed.

Now when you scroll you will see the parallax effect on the orange column as shown in the video below.

It’s one of my favourite web design tricks as it gives web pages more depth and interesting visual effects. You can also see it on my codepen page.