KuraFire Network

FACE: Faruk's Animated CSS Enhancements

« · By Faruk Ateş · Dec 15, 2005

The FACE Project is looking for your input: please send us your feedback!

Please note: Opera 8.x versions have a bug that causes the browser to crash on the onMouseOver event of FACE. This bug has been reported to Opera, but no solution has been found yet. Updates on this will be announced ASAP.

If you like the above, head on over to the Examples section to see what else you can do with this new technique, or Digg this page!

For the longest time, the Web has existed as a static medium, where only animated GIFs and, later on, Flash added some life to pages. With the advent of web standards and DOM scripting, people have started to look more and more at Javascript to add interactivity to websites.

With FACE, a new technology by Tim Hofman and myself, this process has been made so simple that anyone can make their websites come to life, without having to know a whiff of Javascript.

Latest version: FACE 1.0 beta.

FACE was developed to allow standards-compliant web developers to put more life and energy into their pages, without having to learn Javascript or Flash: all it takes is basic math skills and a good understanding of CSS. FACE is built entirely from JavaScript and the CSS that you provide to control the animation.

If you want, you can skip the introduction to FACE and get straight to the practical instructions on how to add FACE to your own site.

Almost, but not quite entirely unlike Flash

FACE distinguishes itself in three important ways from the other options:

1. it requires no Flash or Javascript knowledge or skills
2. it is completely accessible in nature
3. it's instantly plug-and-play

While FACE uses JavaScript to power the animation, implementing it takes little more than just adding a JavaScript include to your document's head section. There is no DOM scripting to replace elements with Flash or anything else: the only things that are changed in the DOM are id and class attributes of the element or elements that you wish to animate. Because of that, FACE works best on clean XHTML documents that have no superfluous elements cluttering up the markup.

Since FACE hooks up onto existing elements and doesn't change the DOM beyond mere attributes, your pages will remain as accessible as they were before. If FACE is loaded on a page, it automatically includes a new CSS file where you can put extra rules in to, for instance, hide certain content. There is a built-in mechanism that disables the CSS file if FACE is not triggered, due to browser limitations. That way, it is ensured that your enhancements will not get in the way of accessiblility or usability.

The philosophy behind FACE was to create something that took my Javascript and CSS Slideshow to the next level and allowed for much easier and more efficient ways to enhance your website. After my first few test cases served as a functional proof of concept, I called in the help of my colleague Tim to make it work with multiple animations running at the same time. Tim's JavaScript wizardry quickly turned my first concept of FACE into a powerful, cross-browser solution that worked so well, we immediately came up with a whole slew of additional features and purposes, which will be added at a later stage.

Why would I want to use FACE?

Have you ever had a client (or yourself) wanting to add life to the website, but the idea of using animated GIFs or Flash gets you shaking your head? Are you longing for rich, powerful interactivity on the Web platform? Then this is just for you!

FACE was made to enhance standards-compliant pages without sacrificing important aspects such as accessibility, scalability and flexibility. In fact, FACE truly opens the doors for you in terms of web design freedom. While we advise you to use it for subtle enhancements, you're free to use FACE in as flashy ways as you can come up with.

The primary reason FACE was developed was to put an end to the static Web, once and for all. When used subtly, it can turn a decent site into a fantastic site. The possibilities are limited only by your imagination.

License details

FACE is available under an open license that allows you to use it freely, commercially or personally, as well as alter it to suit your own specific needs. The only condition is that you leave the Copyright notice in the source intact.

You are not, however, permitted to redistribute or republish your altered version of FACE. This is solely with the intent to keep the project hosted in one central, reliable location. If you feel your changes optimize FACE's performance or would otherwise be a welcome addition to the official FACE release, please contact us. More information on the license can be found on the site Disclaimer.

Examples of FACE

About the author

For this page, I put the animation on a UL which contains four empty list items. The animation was set to apply to the unordered list element itself, so that all four items would animate at the same time.

History of the KuraFire Network

This animation is by far the most complex and heavy of them all. Each of the 8 version numbers required its own animation, as they all have unique paths.

More…

The portal to the four More sections was designed to give the user a preview of what lies behind each section. The animation runs on the four containing divs and uses background-position, text-indent and color shading for the effect.

More Destinations

The Destinations page has, unlike most pages, only an onMouseOver animation. After trying various little effects utilizing borders, I decided to settle for a simple, margin:-powered buzzing.

Contact

Because the Contact page has a set of links that offer you more information and destinations about me, I felt it appropriate to have each link slide into view. The animation is done using margins, with an overflow:hidden set to the containing element to prevent issues.

Log and Articles

The Recent and Popular posts and articles deserved extra attention, so I let them glow up in sequence on these pages. The glow is a simple color change. It's just flashy enough to get your attention focused on what's going on there, thus revealing the most popular posts and articles to you right away.

Home

This is the animation that inspired the FACE technology in the first place. I envisioned a new home page for my site, organised in the sections that you can find there, now, and imagined backgrounds sliding into view and the text subtly appearing right in front of your eyes. Then I went and figured out how to make such an animation possible, and FACE was born.

You'll find more examples on the rest of this site, and we're working on making a few more generic, stand-alone examples that display just how flexible this technology is.

Instructions on implementing FACE

What follows now is the technical explanation on how FACE works:

To trigger FACE, all you have to do is include the JavaScript file in the page and put id="enhance" on an element of choice inside your body section. That element is now the FACE Load Element, or FLE. The true heart of FACE is the Construct, a set of nodes (separated by a colon) that you put in the class attribute on the FLE. These nodes control all aspects of the animation.

The first node can be either C or S; the C indicates that the animation should be applied to the child elements of the FLE, whereas an S would make the animation be applied to the FLE itself.

The second node specifies the classname for the animation. If you use myclass as the classname, then FACE will loop through .myclass1 {}, .myclass2 {}, .myclass3 {}, … during the animation. These are, therefore, the CSS rules you would have to list in your face.css file. Each rule can contain any CSS properties you'd like.

The third node sets the number of steps of the animation. The animation loops from 1 to whatever number you specify here, and that number is appended to the classname for each step of the animation. The classes are replaced, so they don't cascade their information into the next step. Meaning, if you set up a certain property in step 2 but not in step 3, its effect will disappear in the third step.

The fourth node denotes when the animation should happen. Choose L for onLoad, triggering once all images and files are loaded, choose MO to have it happen onMouseOver, or choose B to have it trigger on onLoad and after completion, on onMouseOver state.

The fifth node is the speed of each iteration in milliseconds. Setting this to 10 when you have an animation of 10 steps means it will run for a total of 10x10 milliseconds. Actual speeds are influenced by the speed of your browser and CPU, as well as the complexity of your animation. A simple margin-movement is much less difficult for a browser to render than a complex animation that changes margins, border widths, paddings, background and text colors, as well as width and height, all at the same time. Proper testing is advised!

The sixth node is only in use when the first is set to C (Child elements). When that is the case, the sixth node dictates the delay between each element. In other words, the time before the next child element will start the (same) animation. This happens in parallel manner, which means that the delay does not wait for the previous animation to finish!

What remains after this point is creating the accompanying CSS that controls your animation. To make this process easier, we're also releasing a Generator which will help you construct animations in CSS. Due to circumstances the Generator is not yet finished, but will be made available as part of the download as soon as possible. Until then, it's manual work.

That's it! With your animation specified in the CSS, you're now good to go!

Advanced FACE usage

There is a seventh, optional node. In this node, you can list comma-separated strings that are the id attribute values for other instances of FACE on the page. Meaning, you can have multiple FACE animations on one single page. You must start it off with the primary FACE instance (the one with id="enhance") for this; after that, you can use any id value (or comma-separated values) in the seventh node. These other instances will then be loaded after the primary one is finished with its animation.

Example:

<p id="enhance" class="S:slide:10:L:20:0:glow,slide2">
   This paragraph will be animated by "slide"
</p>
<p id="glow" class="S:slide:10:MO:20:0">
   This paragraph will be animated by "glow"
   when you MouseOver it, but not until "slide"
   is finished with its animation
</p>
<p id="slide2" class="S:slide:10:L:20:0">
   This paragraph will be animated by "slide2",
   and trigger right after the "slide" animation 
   is finished
</p>

Download

The current version of FACE is 1.0 beta.

The download is a Zip file containing the following:

• a sample face.css file
• a face.html page (with some embedded, unrelated CSS) which renders the sample and contains the instructions from above
• a face-example-img.png image used in the sample
• a face-construct.png image used in the instructions
• a license.rtf file containing the License Information
• two .js files: face.js and face-uncompressed.js

The first JavaScript file is compressed to minimum file size, meant for production use. The second, uncompressed file is for you to go through and explore how FACE works, if you'd like.

Again, you are free to make changes to the source JavaScript file, but you may not redistribute your altered version. If you feel you have made an enhancement, improvement or otherwise noteworthy change, and would like to see it featured and/or distributed, you can contact me about it.

Download FACE!

Because this is a beta release, it is possible that you encounter problems. If that happens, please report your bugs to me.

The FACE-comic is from VG Cats © Scott Ramsoomair.