$fx() – JavaScript Animation Library, Code Samples and Usage
August 21st, 2010Yesterday I stumbled upon a really awesome Javascript Animation Library: $fx().
This really small (3.4K) super lightweight library gives one the ability to move, resize, or change the color of objects on the screen by using JavaScript to manipulate CSS along a time line. In fact, I believe you can manipulate any CSS property using $fx(). Check out the home page of #fx() for a sample of what $fx() can do and what it can do for you.
I personally don’t know too much JavaScript, I just never got into it….until last night that is. One of the problems I had with the $fx() website was that their code samples were just javascript and I didn’t know how to execute the javascript commands in my pages very precisely. I proceeded to check out their home page, understood what their page did, strip out all but one cloud in the HTML and JS files, saved it and observed. I would like to share with you some full working examples of$fx() to help you get started using it ASAP, it really is simple and efficient if you know how to use it!
Here we will move an image of a cloud from right to left forever. When you setup this working example on your computer or project server you will need to create an images folder and place an image named cloud1.png in it, then go to http://fx.inetcat.com/ and download the fx.js library. (If their site is down or something, download my copy of $fx() Javascript Animation Library).
(Download a working example of $fx() Javascript Animation Library)
Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>$fx() - JavaScript Animation Library</title>
<link href="style.css" rel="stylesheet" />
<style type="text/css">
#john{
background-image:url(images/cloud1.png);
width:100%;
height:800px;
background-repeat:no-repeat;
}
</style>
<script src="fx.js"></script>
<script type="text/javascript">
var ani = {
gross1: {type: 'backgroundx', from:screen.availWidth,to: -600, step: -5, delay: 10},
};
function startAnimation(){
$fx('#john').fxAdd(ani.gross1).fxRun(null, -1);
}
</script>
</head>
<body onload="startAnimation();">
<div id="john">Text</div>
</body>
</html>
When the page loads, the body tag calls startAnimation(); which is where the code is executed. The javascript array ani contains entry gross1, which holds the actual commands that $fx() will run. See below:
var ani = {
varname: {type: 'css-attribute', from:screen.availWidth, to: -600, step: -5, delay: 10},
};
function startAnimation(){
$fx('#divid').fxAdd(ani.varname).fxRun(null, -1);
}
Here we can see one effect being ran, but let’s say we wanted to also change the font size of the text as well:
<script type="text/javascript">
var ani = {
gross1: {type: 'backgroundx', from:screen.availWidth,to: -600, step: -5, delay: 10},
gross2: {type: 'fontSize', from:10,to: 200, step: 2, delay: 5},
};
function startAnimation(){
$fx('#john').fxAdd(ani.gross1).fxRun(null, -1);
$fx('#john').fxAdd(ani.gross2).fxRun(null, -1);
}
</script>
So what else can you change with $fx()? Well I think the $fx() site explains that pretty clearly:
fxAdd(params) — adds a new effect to the current set. The effects wont run immediately, but will be added to your animation set. The entire set will run after the fxRun() call is made.
params object sets animation parameters. Required set of fields to be defined:
- type — type of animation effect. The type parameter is same as the CSS property name for a DOM element. So, to alter the X-Coordinate of an element, the type needs to be set to ‘left’. Other properties you can alter are:
opacity — cross-browser property to adjust an element’s opacity.
backgroundx — background X position.
backgroundy — background Y position. - from — initial value for property defined in type. This parameter is optional. If it hasn’t been defined then property will be retrieved from style property (style=”property:value”). If style property is not defined in HTML then effect won’t be applied because of insufficient parameters (an animation needs a starting point!). Some methods have special needs: Opacity attempts to get value from element.style.filter in Internet Explorer and reads element.style.opacity property for all other browsers. Backgroundx and backgroundy retrieves values from element.style.backgroundPosition. Left, top, width and height aren’t retrieved from style properties, so it’s not necessary to define left, top, width, or height in the element’s style attribute.
- to — end property value. Once it has been reached, the effect stops running.
- step — positive or negative integer value to alter a CSS property, per one iteration (i.e. step).
- delay — delay between iterations in milliseconds. This parameter is optional, by default it is 100. Do not set this number too high, unless you want choppy animation.
- unit — optional parameter to define measurement units for a certain CSS property. If unit wasn’t defined, then it will be picked by type value: left, top, right, bottom, width, height, margin, padding, spacing, backgroundx, backgroundy – px; font – pt; no unit for all other properties.
- onstart — function called before effect starts. You can use this object inside callback, which references to the element.
- onfinish — same callback as onstart but runs after affect is complete.
All in all, $fx() is a great tool for web developers who need to get some animation done fast, simple, lightweight and no BS.