Scroll-linked effects to add sprinkle in webpages

scrolled-linked-effects

Technologies used for generating scroll-linked effects

HTML5 and CSS3 are undoubtedly way for the future, alike back end components, where there are multiple options or alternatives available and competing for each other,  like that for

  • back end programming language
  • database server
  • web server
  • mail server

or be it choice of operating system itself but truly there is NO technology that can be substituted in place of HTML and CSS, at least as of this writing.

However, we are going to discuss only little and specific bit of front end technologies here: power of and performance consequences of scrolling effects generated through CSS or JavaScript.

We all know that user interfaces(UI) are highly matured these days and we people like to enjoy interactivity, animations, pop-ups etc. on a webpage.  They add life and depth to web applications and improve user experience through the discrete use of CSS effects like transitions and animations. Scrolling effect is just one candidate in a bunch of such effects stimulated in response to HTML events and  adds sprinkle to website and BUIs(Browser User Interfaces).

What are scroll-linked effects and its types

A scroll-linked effect is an effect implemented on a webpage where change is followed by altering position of the scroll, for example updating a positioning property with the aim of producing a parallax scrolling effect. The scroll-linked effects have impact on performance and possible mitigation techniques are also available.

Scrolling effects are triggered after listening for the HTML scroll event and then it usually updates elements on the page in some way.  CSS Scroll API defines about a dozen  of such effects including

  1. Hidey bars: Scrolling down in the bar moves with the container, and when mouse is outside of bars, the bar disappears.
  2. Scroll header: When adjusting scrollTop=0, header smoothly animates into a more substantial element like on images, text size animate with scroll position.
  3. Parallax: The position of elements on the page is affected by the scroll position of their container. Other attributes like opacity or a filter effect may be changed.
  4. Linked scrollers: Multiple elements on the same page are scrolled together with different rates but they do not overlap.

All these effects work pretty well in browsers supporting synchronization on their  main thread. However, most browsers including Firefox*(from version 40 onwards) now are capable to support some sort of asynchronous scrolling, meaning  when we make a web server call like that for accessing a web service, we will not have to wait till the server sends the response, other activities can be continued.

*We just need to alter this parameter to true in Firefox for this purpose:

layers.async-pan-zoom.enabled

Taking advantage of this, hypertext processing engines like CSS or JavaScript can render consistent 60 frames per second for the sake of  the user experience.

In the asynchronous scrolling model, the scroll position is updated in the compositor thread and then immediately, effect is visible to the user even before the scroll event is committed in the DOM and executed on the main thread. This means that the effects implemented will lag a little bit behind what the user has seen for the scroll position. This can cause ultimate outcome to be leggy or jittery and we need to put logic to avoid it.

Proposition and implementation to overcome unwanted consequences of scroll-linked effects

Let us understand this with an elaborate example.

Bellow code snippet implements sticky-positioning effect where the “toolbar” div will stick to the top of the screen when you scroll down.

<body style=”height: 5000px”

onscroll=”document.getElementById(‘toolbar’).style.top = Math.max(100, window.scrollY) + ‘px'”>

</body>

This implementation of sticky positioning relies on the scroll event listener that makes toolbar  div continuously repositioning to top.

The scroll event listener will run with the JavaScript engine in asynchronous manner on the browser’s main thread.  Here,  asynchronous means NOT in step-by-step order relative to the user-visible scrolling.

Therefore, with asynchronous scrolling, the event handler will be delayed or will be executed afterwards relative to the user-visible scroll. This will make the div tag’s execution in jittery way, that is first it is run and then it ” snaps” back into position when the scroll event handler runs.

One way to overcome this problem is to avoid  the scroll event listener and instead  use the CSS property designed for this purpose and it will reduce overhead also, see following

 

<body style=”height: 5000px”>

</body>

Final thoughts and summary

Websites are places for businesses, individuals and organizations to provide easily accessible information to interested visitors without having to arrange physical location meetings. Websites possessing fancy CSS effects like Parallax represent a lousy way of showcasing information, may make visitors to stay more time on site or take engagement to the next level.

However, they do NOT necessarily result in reducing any step in generating lead and may even make navigation difficult. With networks experiencing bandwidth issues, it may  become time-consuming to view even though they are cool and fun way of representation.

Explore more with us

Bliss Web Solution Pvt. Ltd. is a top-notch web development company specializing in optimization of CSS code for high traffic websites. To delve deeper into technicality, you can freely attend weekend discussions held at our office in Ahmedabad, just drop an e-mail to us at enquiry@blisswebsolution.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s