« CSSVista, Edit CSS with Internet Explorer and Firefox simultaneously | Main | Style Versus Design »

FACE: Faruk's Animated CSS Enhancements

FACE, or Faruk's Animated CSS Enhancements, is a technique to add animation into your webpages using simply the power of CSS and Javascript. A technology by Faruk Ates and Tim Hofman, which have been made so simple that anyone can make their websites come to life, without having to know a whiff of Javascript.

face.png
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.

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.

The current version of FACE is 1.0 beta, so as you can see this project is already in its early steps. There is already many great examples on the project's webpage in addition to documentation. To get started download FACE and give it a try. Very interesting project !

face-animation.png
Bookmark this article at these sites
Comments
1

Uhm, VERY important correction: Scott Ramsoomair has NOTHING to do with FACE. It was developed by me (Faruk Ates) and Tim Hofman, and it's my original concept, which is why it carries my name.

Scott Ramsoomair is a cartoonist, who happened to made a comic that had "FACE" in one of its frames, and I've used that frame (and gave him full credit for the comic image, of course). He has nothing to do with the technology, FACE.

2

Thanks Faruk for the correction

Post a comment





(Email will remain hidden)





Please enter the security code you see here




Related entries
Email to a friend
Email this article to:


Your email address:


Message (optional):