moo.fx: how to create a custom effect

November 08 2005, 08:47:00

A tutorial on how to create your own custom effect for moo.fx.

Ok, so you want to create custom effects uh? No? well, I don’t care, here’s a tutorial.

We’ll go through the creation of a custom effect: scrolling background image. If you’re the one with javascript, and you feel you want to skip the tutorial, head directly on the example page.

Let’s setup our environment.

Html:

Don’t forget a proper doctype: (xhtml 1.1 here)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Let’s include moo.fx and prototype:

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

Then we’ll need a div and some links.

 <div id="image"></div>
 <a href="#">Scroll left</a>
 <a href="#">Scroll right</a>

And now the css:

#image {
    background-image: url(mucca.jpg);
    width: 250px;
    height: 130px;
}

This is image I’ve used (it’s very wide, and doesn’t fit this tiny website).

Javascript.

First, let’s create a new effect, extending the base one:

fx.Background = Class.create();
fx.Background.prototype = Object.extend(new fx.Base(), {

});

Then we need the initialize method: this code will be run when the effect is created. Nothing special here: It just converts the string with the id of the element to the element itself with the prototype dollar function, then we use setOptions to allow fx.Base to process our effect’s options. (onComplete and duration, both optional). We’ve also set this.now, to tell the effect it should start from a background position of 0.

initialize

initialize: function(el, options) {
    this.el = $(el);
    this.setOptions(options);
    this.now = 0;
},

Now, le’ts add the increase method: this method will tell fx.Base what to change every step, (and we want to change the background position, right?)

increase

increase: function() {
    this.el.style.backgroundPosition = this.now + "px";
},

//note: this.now represents the actual position.

Since this effect extends fx.Base, we have inherited all its methods, like custom() and clearTimer().

Now we’ll need something more, if we don’t want to be limited to the custom() method. Let’s create scroll:

scroll

scroll: function(howMuch){
    this.clearTimer();
    this.custom(this.now, this.now + howMuch)
}

As you can see it’s very simple: We clear the Timer, to exclude the builtin check that won’t let a user break the effect, with multiple crazy clicksTM, then we call custom() and tell him to go from the actual position to the position we’ve passed as a parameter.

Now, let’s use this effect:

onload

 window.onload = function(){
       myNewEffect = new fx.Background('image', {duration: 500});
 }

Modify our links:

 <a href="#" onclick="myNewEffect.scroll(50)">Scroll left</a>
 <a href="#" onclick="myNewEffect.scroll(-50)">Scroll right</a>

We’re done!

Now you can download this tutorial’s files (one html file with inline css and javascript, one image, prototype.lite.js and moo.fx.js).

The results:

Scroll left Scroll right

I’ve played around with this effect, styled the contents and added some methods to scroll to the end and the beginning of the image. Go take a look, and don’t forget to right click -> view source.

Got any questions/suggestions/corrections about this tutorial? feel free to leave a comment.