I’ve been using skrollr on quite a few projects both for its ease of use and ease of implementation. Considering the over 12K stars on github, it’s safe to say that it’s gained heavy adoption. A pretty common use case for a library like skrollr is to have a bit of text over a parallaxed background image- meaning that the background is moving at a different speed on scroll than the rate of speed of the rest of the content.

The typical and easy way to create such an effect would be to simply add data-attributes on the html element to change the position of the background image of the section. Unfortunately, background-position causes some repainting even when null Z transform hacks are applied.

Here is a codepen showing the original implementation, with some noticeable jank. For information on debugging scrolling, Paul Lewis has created a great resource.

Note how the paint rectangles show a bright green box highlighting some repainting:

If you check out Paul Lewis’ css triggers site, you can see that changes to the background-position and margin-top properties cause either layout or both paint and layout update values which heavily impact browser workload. But transforms do not.

In order to move the background image with transforms we'll need an extra div that we will absolutely position behind the text. We'll then z-index this div back one value.

The HTML:

      <div class="pllax-bk"
    data-0="transform: translateY(-250px);"
    data-end="transform: translateY(-100px);"
    ></div>
  <div class="content">
    <h2>Parallax</h2>
    <p>Selvage cardigan authentic whatever…</p>
  </div><!--content-->

The CSS:

    $nu : 280px;
  $w : 100%;
  section {
    width: $w;
    height: $nu;
    overflow: hidden;
  }
  .pllax-bk {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/st-bk2.jpg") no-repeat;
    width: $w;
    height: $nu*2;
    background-size: cover;
    z-index: -2;
    @extend .accelerate;
  }

Now, our example scrolls smoothly, and we are free of those nasty green rectangles.

A few things to consider: in both examples, you will need to make sure that the background image has a height that is large enough to pan through the top and bottom of the image.

In the properly hardware accelerated version I’m showing, since we are working with z-indexing of the sections, the sections above and below the parallaxed section will need to have a background color or image specified.

Due to our use of overflow:hidden, this technique works better for examples where you know the general amount of content in advance, otherwise you will get a secondary scrollbar.

There are, of course, other ways of implementing a jank-free scroll. But if you’re already loading skrollr and don’t want to write a lot of extra javascript to achieve jank-free parallax background scroll, this is a good way of doing so.


7,578 3 18