CSS Has Done a Lot to Revolutionize Web Design Expectations

Between the years 2010 and 2020, a very noticeable shift in web design standards took place to account for advancements in the functionality supported by the basic web scripting languages. Websites were once primarily made of HTML files with straightforward CSS styling and static images, and interactive elements were mainly achieved with outdated formats like Adobe Flash and ImageReady. When vector-based graphics took hold, more elaborate interactive sequences could be produced without requiring the client to download large files to render them.

As a result of CSS more easily allowing for entire sections of web pages to self-animate in response to simple interactions like the user's scrolling motions, having backgrounds scroll along with the foreground at a different pace became a common way to present a website. In many examples, as the user scrolls down the page, a solid piece of the foreground "gives way" to uncover a background image that is either fixed in its position or moves more slowly. Continuing to scroll down makes another solid foreground segment cover the background back up from the bottom.

The web development blog CSS-Tricks showcases a method of manipulating this process so that a large text string is imposed over the contents of the background image while the user has scrolled far enough downward that the image is in full view. Beforehand, however, what is displayed instead is a solid white background and what seems to be the same text string now functioning as a limited "window" to the background image behind it. This is partly achieved by having each of the two stages of the display stored within a separate "container" class, each containing a copy of the same text string.

Both text strings would begin and stay at the upper-left corners of their respective containers by default, but this example adds code that keeps them both centered on the screen simultaneously and uses clipping techniques to make sure that one string is invisible while the other container's space is overlaying it. This creates the illusion that there is only one "string" that "transforms" with every transition between the containers. For more information click here https://css-tricks.com/going-from-solid-to-knockout-text-on-scroll/.