Jazz Up Your Presentations with AliceJS

November 08, 2011

This week I'd like to introduce you to a Javascript library known as AliceJS. AliceJS (A Lightweight Independent CSS Engine) creates some really neat visual effects using CSS3 keyframe animations. Of course, you could implement these yourself if you are CSS3-savvy, but if you lack the technical know-how, you might want to take this library for a spin!

Get started with Rise Vision

I tested AliceJS in a very simple open source digital signage Presentation. I added Touch Me buttons to each of 4 Placeholders and applied a different effect to each button:  wobble, spring, rotate and bounce. Some of the animations were a bit finicky to set up, but once everything was in place it was great fun to change the values of the different parameters and see what the visual outcome was.

 

 

You can have a look at the live demo here. It's important to note that the animations will only work in WebKit-based browsers (i.e. Chrome and Safari). I've included the settings that I used to create each type of animation. You'll definitely want to use these effects in moderation so that viewers aren't overwhelmed or annoyed. For example, it would probably be best to show an animation after a certain amount of time has passed as opposed to showing it continuously.

You can see what other effects AliceJS is capable of here. Have fun thinking of creative ways to jazz up your Presentations!