How To Create Scrolling Parallax Effect With CSS

The websites with “parallax effect” has been popular for a quite long time.In case you don’t know about this effect. It’s basically comprised of several layers of images that are moving in different directions or with different speeds.This leads to cool illusional effect that pleases the visitor.

The most common way to accomplish this is by adding a jQuery plugin to a website. This has some disadvantages though. These plugins generally attach an event handler to the scroll event of the window object. This leads to numerous events being handled via JavaScript (handling scroll could affect the performance of the website so, it should be considered cautiously). To move the multiple image layers, background positions of images get calculated and set to the depending elements, which then causes numerous DOM manipulations in addition.In simple words javascript parallax can cause poor performance.

With the help of background-position: fixed

Few people may know, that this effect can also be achieved with CSS.

For this type of parallax effect, background images have to be placed on different elements and these element need to have their background-attachment: fixed.We can change behavior and positioning of any background image by defining background-attachment.

The initial value of the property is scroll, which means that the image position is fixed to its element as we all know this behaviour.Normally, when user scrolls on a website the elements are moving up and down.As does the background images.

When you set background-attachment to fixed then it gets really interestingfixed determines that the background image position is not fixed with the background’s container(<div>) but rather fixed to the viewport. This implies that the image will stay visually on the same position disregard of how much scrolling is done. This leads to the cool optical parallax effect.

Let’s take a look at the actual implementation:

<!-- Four containers for setting the background images -->
<div class="parallax">
  <div class="bg__foo">foo</div>
  <div class="bg__bar">bar</div>
  <div class="bg__baz">baz</div>
  <div class="bg__bazz">bazz</div>
</div>
// setting base styles to image containers
[class*="bg__"] {
  height: 50vh;

  text-indent: -9999px;

  /* fix background */
  background-attachment: fixed;

  /* center it */
  background-position: center center;

  /* Scale it nicely to the element */
  background-size: cover;

  /* just make it look a bit better 😉 */
  &:nth-child(2n) {
    box-shadow: inset 0 0 1em #111;
  }
}

.bg__foo {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg
  );
}

.bg__bar {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg
  );
}

.bg__baz {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg
  );
}

.bg__bazz {
  height: 100vh;

  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg
  );
}

Now you can see that it’s actually giving pretty nice optical illusion. It is compatible with most of the modern browsers and android 2.1 or above.

Verdict

In person I favor CSS solution over JavaScript and the above example justifies that. As there’s no logic or additional DOM manipulation required in this which helps the whole solution to be fairly light but there is still one thing that you need to keep in mind while tinkering with parallax effects.

Even though this is a fairly light solution but the browser still has to do many calculations and adjustments due to background-attachment: fixed which might lead to drop in frame rates (<60) however, in chrome this thing runs pretty smoothly.

So,I hope you liked my solution and if you have any other solution or suggestion feel free to share it.

Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *