Posts Tagged ‘moo.fx’

Using moo.fx making cool effect

Monday, February 19th, 2007 by hejian

moo.fx is a super lightweight (3 kb) javascript effects library that can add snazz to any website with less than 5 minutes work.

Let’s going to make a smooth sliding effect.

1. Include the libraries required for the effect that will be used

<script type="text/javascript" src="prototype.lite.js"></script>
<script type="text/javascript" src="moo.fx.js"></script>

2. Creating new effect

<script type="text/javascript">
var effectObject;
window.onload = function () {
effectObject = new fx.Height ('idToAffect', {duration: 400});
}
</script>

Including fx.Height, there are three base effects in moo.fx: fx.Height, fx.Width, fx.Opacity

3. Call the toggle() method

<p onclick="effectObject.toggle();">Title</p>

Wordpress template made by HeJian