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

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Put a New FACE on Your Web Site

Last updated Oct 17, 2003.

In my previous article I introduced you to easy web site animation using a new technique I devised, entitled FACE: Faruk’s Animated CSS Enhancements. It is now time to roll up our sleeves and get down and dirty with the actual FACE script, so let me show you just how easily you can implement FACE into your web pages. It requires no JavaScript knowledge of any kind, but a good understanding of CSS is imperative.

Put a New FACE on Your Web Site

Imagine this situation: you have a website, either your own or one you’ve made for a client, and it’s made with rich, semantic markup and clean, efficient CSS. Perhaps you’ve added a pinch of progressive enhancements, maybe even some AJAX in the right places. Altogether, you are pleased with the result, but something is missing. The site isn’t quite as lively as you’d have liked it to be, but you have good reasons not to embed Flash into the site--there is no budget, no time, or maybe you just aren’t proficient in Flash. With FACE at your disposal you no longer need Flash to add that finishing touch.

FACE, or Faruk’s Animated CSS Enhancements, is a brand-new technique that combines JavaScript and CSS to offer rich animations, which you can easily and quickly add to your existing web pages. In a previous article[1] we introduced FACE, explained what its origins are and why it was made in the first place. Today we will explain how you can implement FACE in your site and immediately start to make your pages more lively.

The First Step to Using FACE

First, you’ll need to get the source files from the FACE Project page[2]. In the zip-file that you can download there you will find some example files to start you off with, but the only file that is truly necessary for implementing FACE in your pages is the file called face.js.

FACE is a piece of unobtrusive JavaScript that is effectively plug-and-play. This means that to be able to start using and configuring FACE, you simply need to include your face.js file in the page. That’s it.

However, before getting to the practical instructions, it’s good to have an idea of how FACE works. A good understanding of Cascading Style Sheets (CSS) is also important, because we configure our animations through CSS entirely, not through JavaScript.

FACE animates one or more elements on your page by looping through a series of class attributes. Each class attribute’s value represents one iteration (or step) of the animation. You can think of the classes as frames in a movie loop, if that helps you.

Each class consists of a name that you specify, suffixed with an incrementing number, starting at 1. To get an animation, you need to create corresponding CSS rules, and each rule should have slightly different specifications to make the animation come to life. The JavaScript of FACE loops through these classes in high speed, making the result look like an animation right in the page. So let’s take a look at how you can actually put this effect in your site.

Implementing FACE in a Document

On any page you want to use FACE, you need to include the JavaScript file. For this explanation we will put our face.js file in the root level of our website. Our include line therefore looks like this:

<script type="text/javascript" src="/face.js"></script>

The forward slash (/) at the start allows us to use this line of code anywhere on our website, no matter how deep into the directory structure we are.

Now that we have the FACE script included, we are ready to assign FACE to an object on the page.

To trigger the FACE engine, you need to tell the JavaScript what element you would like to enhance. This is done by adding an id attribute to that element, with a value of "enhance". Let’s imagine that our page contains the following block of code:

<ul>
   <li>Apples</li>
   <li>Oranges</li>

   <li>Bananas</li>
   <li>Lemons</li>
</ul>

We can do anything we’d like with this small list, but to keep things easy to visualize let’s say we just want the list items to move to the right and back when we hover over them. It may not be the most useful enhancement, but it makes things a lot easier to grasp. We will be getting to more advanced and complex uses in a later article.

Letting the FACE engine know that we want to animate this list is as simple as changing the first line of our code to read like this:

<ul id="enhance">

However, while the FACE engine now picks up this UL object in the page, it doesn’t yet know what you want to do with it. To configure FACE and tell it what you want it to do, you must also add a class attribute. The value of this class attribute is of extreme importance: this is where you give FACE your instructions.

The FACE Construct: Heart and Soul of Your Animation

We have dubbed this class attribute the FACE Construct: it consists of a series of configuration nodes, each of them separated by a colon. Together, they form a simple string that FACE then breaks apart and distills its instructions from.

Let’s start with an example and analyze that piece by piece:

<ul id="enhance" class="C:move:10:MO:50:20">

In this example, the Construct consists of: "C:move:10:MO:50:20". There are six nodes, and they each have their specific purpose:

The first node is a "C" — it stands for "Children" and tells the FACE engine that we want to animate the child elements of this object. The other option here is "S" for "Self", which tells FACE that we want to animate the object itself.

Because CSS has descendant selectors[3], there is no need for the script to go more than one level deep when looking for child elements. If you wish to animate the elements that are within the object’s direct child elements, simple descendant selectors will do the trick. Some example CSS rules for that would look like this:

.move1 a { ... }
.move2 a { ... }
.move3 a { ... }
...

The second node is the name of your CSS class, which will automatically be suffixed with incrementing numbers. While you are technically free to use numbers and underscores here, we strongly recommend you stick to letters only.

The third node is an integer that sets the number of animation steps. FACE will take the name from your second node and append it with numbers, starting at 1, until it reaches the figure you’ve entered here. The three rules of CSS above are a good impression of what FACE will loop through.

The fourth node is the "trigger" node that tells FACE when it should run your animation. At the time of writing, the current release of FACE (beta 1) only offers two trigger modes: onLoad and onMouseOver. These will be expanded upon in future releases, but for now we can choose either L for onLoad, or MO for onMouseOver.

An important thing to keep in mind when you use FACE for onLoad animations is that this makes use of the window.onload property in Javascript. If any other script on your site also makes use of window.onload, you will need to use Simon Willison’s addLoadEvent script[4] to allow more than one function to run on window.onload.

The fifth node controls the speed of your animation in milliseconds. However, JavaScript and its implementation in current browsers isn’t as perfect as we’d like it to be; the actual speed of your animation is influenced heavily by the speed of your CPU, the browser, the length (number of steps) in your animation, whether you are animating one or many elements and, above all, the complexity of your CSS rules that define the animation itself.

The sixth node is only utilized if your animation is configured to run on the object’s child elements. It is the "delay node" and specifies a pause in milliseconds in-between each consecutive child element that FACE loops through.

The Last Step: CSS

Our code block now looks like this:

<ul id="enhance" class="C:move:10:MO:50:20">

   <li>Apples</li>
   <li>Oranges</li>
   <li>Bananas</li>
   <li>Lemons</li>

</ul>

At this point, FACE knows everything it needs to know to run your animation. In our case, it will run through classes entitled "move1" to "move10" whenever we move our mouse over one of the list items. The speed of the animation will be 50 milliseconds per frame, so our total animation will take 1000 milliseconds, or one full second.

However, as much as the FACE engine is all set and ready, your browser doesn’t yet know what it is supposed to display when FACE does its thing. It’s time to add our CSS rules!

We wanted to move the text to the right and back in our very simple example, which gives us several CSS options to choose from: margin, padding and text-indent. All three are equally easy, but let’s go with text-indent. Our CSS can look like this:

.move1 { text-indent: 2px; }
.move2 { text-indent: 4px; }
.move3 { text-indent: 6px; }
.move4 { text-indent: 8px; }
.move5 { text-indent: 10px; }
.move6 { text-indent: 8px; }
.move7 { text-indent: 6px; }
.move8 { text-indent: 4px; }
.move9 { text-indent: 2px; }
.move10 { text-indent: 0; }

Of course, we need to store these CSS rules somewhere, but preferably in an external CSS file that only gets loaded if we need it. Fortunately, FACE itself will include a CSS file (or at least look for one) if it turns out that you have configured it to run through an animation on the page. By default, FACE will look for a file called "face.css" in the root of your site. As a standard CSS include, that would look like this:

<link rel="stylesheet" href="/face.css" media="screen" type="text/css" />

But don’t add this! The FACE engine will automatically add this to your document’s <head> section if it is needed, saving you the trouble. If FACE doesn’t encounter the id="enhance" attribute in your page, it will exit itself and not load this CSS file, so you can safely put all your animation in there without having to worry about whether or not it may accidentally influence your other pages.

Now, in this face.css file, you can place the above ten CSS rules, save it and put it in your website root. When you’ve done that, everything is ready to go and you can test out your very first FACE-powered animation.

While our example may have been extremely simple and relatively useless, it doesn’t take much imagination to see where this all can lead to. We did a simple run through various text-indent values, now, but imagine running through background colors, text colors, margins, paddings, widths, heights, positioning, you name it. CSS is an immensely powerful language that allows for countless of different animations and combinations. It is up to you to explore them.

In our next article, we will look into much more sophisticated implementations of FACE, with examples that more effectively display why FACE has the E for "Enhancements" at the end.