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.

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.

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.

Conclusion

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: www.techalpine.com
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...

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,00This 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,00This 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!