Posts Tagged ‘moo.fx’
Using moo.fx making cool effect
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>