Creating Fixed Scrolling Effects Without JavaScript or Coding Frameworks

As Cascading Style Sheets and JavaScript languages continue to evolve, web developers and designers are finding out that there are multiple ways to skin a cat when it comes to certain effects. A recent discussion on a popular web design forum exemplifies such situations; a forum member posted an animation of a very cool effect whereby half of the page is anchored and the other half scrolls through what looks like information cards stacking right on top of each other.

As luck would have it, the website in question was developed by a forum member who recognized it right away, and he was more than happy to link to his GitHub repository so that everyone could see the relevant code. The site was built with the Nuxt.JS framework, which is basically a set of JavaScript libraries based on the popular Vue framework, which in turn is a fork of the Angular.JS platform developed by Google.

The site developer also reminded forum members that the effect in question, which is similar to the trendy parallax scrolling effect of single-page websites, can be coded with the ScrollTrigger library developed by GSAP, and also through the use of position:sticky declarations on CSS. The project was acclaimed, and some observers pointed out that Mac versions of the Chrome browser created two cursors, a matter that the developer was not aware of and vowed to look into.

What is surprising about the effect is that it really does not need a framework as long as you can code CSS. The scrolling panel of the page would have to be sticky, and the effect can be accomplished with the right filters plus minimum height declarations. FlexBox and Boostrap were also mentioned because of libraries that can replicate the effect.

Even though this neat effect resonated among most forum members, some explained that they are no longer fond of scrolling tricks, and some of their clients agree with this sentiment. The nugget of wisdom in this regard is that just because you can accomplish just about anything with CSS these days, it does not mean you should propose it to all clients. For more information click here