Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Introducing Easy Web Site Animation with FACE

Last updated Oct 17, 2003.

The Reemergence of JavaScript

For most of the Web’s many years of existence, we have seen three kinds of sites: the static kind, the kind that presents animated GIF images in an attempt to be lively, and the kind that’s enriched with Flash in some way.

While a page on the Web is static by nature (on its own, HTML is devoid of any dynamics), demand is high for a rich and interactive user experience. Advertisement banners have long made use of flashy animations to stand out among the lifeless areas of the page, but plenty of sites have embedded Flash documents to make parts of the page more interactive and lively.

In the earlier days of the Internet, however, it was not Flash but JavaScript that enriched pages with pseudo-interactive effects to make them more appealing. Unfortunately, this pre-2000 era’s JavaScript, dubbed Dynamic HTML (DHTML), was rarely functional; more often than not, it was also abused by developers to mask a lack of quality content on the site.

When standards-based development gained ground, the old DHTML enrichments were quickly tossed aside in favor of cleanliness and more tranquil approaches focused on user experience. Those Web developers still using JavaScript often turned to cut-and-paste scripts from online resources that were seen by the standards movement as disruptive and obtrusive. JavaScript was used more and more for evil purposes such as creating pop-up and pop-under banners, which put a black mark on the JavaScript name.

However, over the last few years JavaScript has seen a rejuvenation. It has been given a new chance, even managing to become an incredibly popular resource to enliven pages. The widespread success of AJAX[1] has renewed the interest of modern Web developers in JavaScript, and new tricks are concocted with it regularly, this time to aid the user experience rather than to disrupt it.

Yet the liveliness of JavaScript-enhanced pages came with a restriction. CSS-based designers who knew little or no JavaScript programming were forced to either mimic existing simple effects, such as color fades, or stick with pre-made scripts and find help from other people to customize them. Real animation power was minimal, and anything beyond the simplest animation or effect required quite a good amount of knowledge and skill in JavaScript.

Flash was still a popular option—for sophisticated animation it was even more popular—but Flash has its own set of problems. Few standards-focused Web developers were anywhere near as proficient in Flash as they were in CSS, if at all, and it takes tremendous effort to implement Flash in an accessible manner. On top of that, Flash really shouldn’t be used for any navigational elements, such as the menu or a list of archived entries.

These and other predicaments ruled out Flash as a means to enrich sites in certain ways. As a result, many CSS designers were left without options. Many simply shrugged it off and moved on, trying to work their way around the issue. For a while, that was sufficient. That time, however, has passed. Now, there is FACE, which stands for Faruk’s Animated CSS Enhancements.

What Is FACE?

FACE is the result of taking a little bit of JavaScript code to a much higher level. The original JavaScript was written to create a sequence of several chopped-up CSS files, in order to present a slideshow of how a CSS-based design was put together. To produce more powerful animation live on a page, the concept of looping through external CSS files, one for each step of the animation, was clearly insufficient. But the animation had to be CSS-powered if it was to be truly powerful and flexible.

To make that kind of animation freedom possible, it was evident that you had to loop through classes on an HTML element. Looping through a Document Object Model node, such as the one for background color, would do no good if you wanted the element to move around by increasing or decreasing its margin. Looping through classes would allow you to specify any CSS in each class that you’d like, whether it was a margin or padding, color or something else entirely.

Of course, animation freedom was only one aspect—what about having to learn JavaScript? How could you create a different animation on a different page, while using the same bit of JavaScript?

To accommodate that problem, the configuration of an animation would have to be taken outside of the JavaScript—not only out of the JavaScript file, but also out of JavaScript syntax. After all, if you still had to know JavaScript syntax to implement it on a page, the CSS designers who had absolutely no affinity for or interest in JavaScript still wouldn’t be able to use it.

This problem was solved by putting the configuration of an animation right into the HTML source itself, along with the key to trigger the FACE engine. In true unobtrusive practice, if the key to trigger FACE (an id="enhance" attribute on an element in the body section of a page) is absent, the engine isn’t loaded, and the script simply exits itself.

FACE is now a small but sophisticated JavaScript engine that can be plugged into any Web site, and can be used by those who have absolutely no knowledge of JavaScript. It allows you to hook up an animation to an element or several elements in your page, and create the entire animation’s effect using nothing but CSS.

A Step in What Direction?

When FACE was released as an early Christmas present last year, it was met mostly with enthusiasm and excitement, but some people responded with concern. According to these folks, FACE seemed like a step back to the pre-2000 era of DHTML effects.

Their concerns are not entirely ungrounded: FACE was a particularly early beta release that supported only two modes of triggering: onLoad and onMouseOver. Because of the limited options at the time, most of the examples that were released along with FACE showcased its technical power in a selection of onLoad-triggered animations.

Had FACE missed its goal? The cynics would argue that it didn’t particularly enhance the user experience, and perhaps was even distracting—much like the old DHTML. But there’s much more to FACE than merely some onLoad examples.

FACE’s potential has been recognized and acknowledged. The onLoad trigger is not the only one, and many more trigger methods are being developed so that FACE can be implemented in a plethora of ways and situations. At the time of this writing, FACE was still a very first release—a beta release, even—and from this point on it can only improve.

In the next article in this series, we’ll take a look at how you can implement this new tool in your Web site and make your pages come alive.