- Introducing Easy Web Site Animation with FACE
- Put a New FACE on Your Web Site
- Advanced Uses of FACE
- Help! I’m FACE-ing problems!: Troubleshooting FACE
- Other Uses and Implementations of FACE
- Prototype, Dojo, and jQuery
- Django and Ruby on Rails
- Delving Deeper Into Django
- Andy Clarke
- Kris Hadlock
- Robert Hoekman, Jr.
- Molly Holzschlag
- Sarah Horton
- Miraz Jordan
- Jonathan and Lisa Price
- Catherine Seda
- Dave Shea
- Dave Taylor
- Faruk Ateş
Table of Contents
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Meta Tags and Search
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Intellectual Property for Web Designers
Introducing Easy Web Site Animation with FACE
Last updated Oct 17, 2003.
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.
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?
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.
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.
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.