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
- Hidey bars: Scrolling down in the bar moves with the container, and when mouse is outside of bars, the bar disappears.
- Scroll header: When adjusting scrollTop=0, header smoothly animates into a more substantial element like on images, text size animate with scroll position.
- 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.
- 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'"
>
<div
id="toolbar"
style="position:absolute; top:100px; width:100px; height:20px; background-color:green"
></div>
</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">
<div
id="toolbar"
style="position:sticky; top: 0px; margin-top:100px; width:100px; height:20px; background-color:green"
></div>
</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