Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with Parallaxing in JavaScript

This particular tutorial focuses on parallaxing of web sites and also teaches you a few methods that can be applied to develop them. We first take a look at what parallaxing is and then move onto the ways that discuss their implementation.

Of late, parallaxing sites have been a very popular trend on the Web. So, if you are unaware as to what they actually are, here’s a little description for you.

Parallax sites are basically ones that feature changing visual structures in pages, and these changes are response to any scrolling activity on the page. So to say, the visuals on the page change as you scroll over. Elements that are present in these pages basically rotate, scale up or down and even move, as per the scroll position.

See two of our other articles regarding Parallaxing in web environments:

How does it affect performance?

As such, you may or may not be a big fan of parallax sites, but what’s certain is that they can thoroughly degrade the performance of your web pages and thus, the entire site. Now, you might ask why?

Here’s the answer! Browsers that we use generally tend to be optimized in such a way that basically expects new content to either appear at the bottom or the top of the page. Browsers therefore tend to work well when there are less visual changes in the page as you scroll. However, this notion doesn’t hold for parallax websites. A parallax site may feature so many visual changes, thereby requiring the browser to repaint the entire page most of the time.

In general, one can say that parallax sites tend to be like –

  • Have background elements that change their position, scale and rotate, as one scroll up or down the page.
  • Have page content that scrolls up or down.

So, now you might be thinking that if you are on course to build a parallax site, are you bound by the performance limitations or can you make alternative strategies count? Let us take a look into the methods that can help us with the creation of parallax sites without hurting the performance parameters.

Using DOM elements with absolute positions

This is basically a method that most people choose to implement. In this case, what happens is the page consists of a number of elements and whenever a scroll event takes place, a number of visual updates happen that allow for transformation.

In fact, you can also take a look into the details by firing up Chrome DevTools’ Timeline in the frame mode and the looking at it. What you are likely to notice would be full-screen operations that are expensive. Further, if you happen to be someone carrying out a lot of scrolling events, you’ll also see many different scroll events in just a single frame, every one of which would trigger layout work.

DevTools for Web Development

Figure 1: Showing DevTools

Something to take note of would be that to hit a target of 60 frames per second, which is the refresh rate for monitors at 60Hz in general, you basically have about 16 milliseconds to implement your updates. Also, initially you might have a version that implements updates on every scroll, but that update process does not essentially coincide with the refresh rate of the browser. As a result, there is a loss of frames, or just plain overcrowding in one frame. This basically disturbs the performance of the website and results in a number of disappointed users. You can change this though. If you can just move the update code from the scroll event to a requestAnimationFrame callback and then simply capture the scroll value in the callback of the scroll event. Also, after implementing this little change you can go back and check DevTools. You are likely to notice a very slight improvement in this case and also that there will be just one layout operation in each of the frames.

As such, we can choose to manage one or one hundred scroll events in every frame, but only save the most recent value for usage when the requestAnimationFrame performs its callbacks and carries out the implemented visual updates. All in all, the process you implement stops trying to force updates during scrolling and asks the browser to allocate a certain time window, when they can be implemented.

This entire process still has another big problem, be it with or without the requestAnimationFrame implementation. Moving of the visual elements requires big and expensive repainting tasks. In general, it is a blocking operation whereby the browser stops any other work. Also the 16ms time is very often overshot, which causes problems.

Usage of DOM elements with 3D transformations

An alternative approach that one can choose to take instead of using absolute positions is that of 3D transformations to the elements. In such a situation, elements that have 3D transforms are provided with a new layer per element, and for WebKit browsers, a switch to the hardware compositor can also be done. On the contrary, the earlier method had just one single layer which needed repainting for any small change and also had the CPU undertaking all of these tasks comprising of painting and compositing.

In this method, every element to which we apply a 3D transform has a layer. And what we can do here is have more transformations on elements, which won’t require repainting of the layer. Also, the GPU in this regard can deal with the moving of the elements and the compositing of the final page.

Also, people are often noted to make use of the -webkit-transform: translateZ(0); which shows amazing performance improvements. However, this does have its fair share of problems:

  • It does not have cross-browser compatibility.
  • It also involves the browser by the creation of a new layer for each transformed element. Plenty of layers can easily cause performance issues.
  • It has been disabled for many of the WebKit portals.

Now, if you choose to take the 3D method, you’ll need to be a little cautious, since it is mainly a temporary solution to your problem. Also, it is advisable to avoid paints wherever you can and just go about moving the already present elements around the page. For example, the common implementation in parallax sites is to have fixed height divs and then change the position of their background to provide the effect. This can cost you on performance considering that a repaint of the element is required with every pass. Instead, you can create the element, wrap it inside a div with overflow: hidden, and then simply go ahead with the translation.

Using WebGL or fixed position canvas

The last option that you have as a developer is to make use of a fixed position canvas, which remains at the back of the page, and into which we draw the transformed images. While this method may not seem like an appropriate solution at first, it certainly carries a number of advantages:

  • Too much of compositor work is not required because it has only one element, which is the canvas.
  • We basically deal with a single hardware accelerated bitmap.
  • Development and management is a lot easier considering that the Canvas 2D API is apt for the transformations that we are going to be performing.

Listing 1: Implementing fixed position canvas

 * Updating and drawing in the visual elements to the canvas.
function updateelements () {
  var relativey = lastscrolly / h;
  // Fill the canvas up
  context.fillStyle = "#1e2124";
  context.fillRect(0, 0, canvas.width, canvas.height);
  // Drawing of the background
  context.drawImage(bg, 0, pos(0, -3600, relativey, 0));
  // Drawing of each of the blobs in turn
  context.drawImage(blob1, 484, pos(254, -4400, relativey, 0));
  context.drawImage(blob2, 84, pos(954, -5400, relativey, 0));
  context.drawImage(blob3, 584, pos(1054, -3900, relativey, 0));
  context.drawImage(blob4, 44, pos(1400, -6900, relativey, 0));
  context.drawImage(blob5, -40, pos(1730, -5900, relativey, 0));
  context.drawImage(blob6, 325, pos(2860, -7900, relativey, 0));
  context.drawImage(blob7, 725, pos(2550, -4900, relativey, 0));
  context.drawImage(blob8, 570, pos(2300, -3700, relativey, 0));
  context.drawImage(blob9, 640, pos(3700, -9000, relativey, 0));
  // Allowing for another rAF call to be scheduled
  ticking = false;
 * Calculating a rel disposition given the page’s scroll
 * range normalized from 0 to 1
 * @param {number} base The start value.
 * @param {number} range The amt of pixels that it can move.
 * @param {number} relY The normalized scroll value.
 * @param {number} offset A base normalized value from where to start the scroll behavior.
 * @returns {number} The updated position value.
function pos(base, range, rely, offset) {
  return base + limit(0, 1, rely - offset) * range;
 * Clamping a number to a certain range.
 * @param {number} min The minimum value.
 * @param {number} max The maximum value.
 * @param {number} value The value to limit.
 * @returns {number} The clamped value.
function limit(min, max, value) {
  return Math.max(min, Math.min(max, value));

What we have done above is used the canvas drawImage API call, and then give it the background image, along with the colored blobs to be drawn and their locations.

The approach works very well when we have large images or blocks of text that can be challenging to implement with the other solutions mentioned above.

Another way is to look towards WebGL, which is also dependent on the compatibility of the browser. WebGL is said to have the most direct route to the graphics card among all the APIs. Thus, it has the highest probability of achieving the 60fps target. You can use Modernizr, in order to check for API support.

Listing 2: Checking for WebGL support

// checking for WebGL support, otherwise you can switch to canvas
if (Modernizr.webgl) {
  renderer = new THREE.WebGLRenderer();
} else if (Modernizr.canvas) {
  renderer = new THREE.CanvasRenderer();


In the above article, we have seen three different approaches for the development of parallax sites and also discussed their implementation, advantages and drawbacks. Although much of what you apply will depend on the kind of target you are trying to achieve with your design, you can still keep these in mind, as they will help you. Since any of these ways could come in handy at any possible tie, it is good to know all the options.

Website: Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login