jsFiddle

• Run
• Edit

• JavaScript
• HTML
• CSS
• Result

Fx.DrawTransition = new Class({
    
    Extends: Fx,

    initialize: function(element, options){
        this.element = document.id(element);
        this.parent(options);
    },
    
    start: function(from, to){
        this.parent(from, to);
        this.color = this.getColor();
        this.top = 0;
        return this;
    },
    
    set: function(now){
        new Element('p', {
            html: '<b>' + now + '</b>',
            styles: {
                'left': now,
                'top': this.top,
                'background': this.color
            }
        }).inject(this.element);
        this.top += 4;
        return this;
    },
    
    getColor: function(){
        var colors = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'],
            digit = new Array(5),
            color = "";
        for (i = 0; i < 6; i++) {
            digit[i] = colors[Math.round(Math.random() * 14)]
            color = color + digit[i]
        }
        return '#'+color;
    }

});

var myFx = new Fx.DrawTransition('canvas');



/* demo utility stuff */

$('clear').addEvent('click', function(event){
    event.stop();
    myFx.element.empty();
})
    
$('options').addEvent('submit',function(event){
    event.stop();
    myFx.setOptions(this.toPairs());
    myFx.options.duration = myFx.options.duration.toInt();
    myFx.options.fps = myFx.options.fps.toInt();
    myFx.start($('from').value.toInt(), $('to').value.toInt());
});

Element.implement({
    
    toPairs: function(){
        var json = {};
            this.getElements('input, select, textarea', true).each(function(el){
                if (!el.name || el.disabled || el.type == 'submit' || el.type == 'reset' || el.type == 'file') return;
                var value = (el.tagName.toLowerCase() == 'select') ? Element.getSelected(el).map(function(opt){
                    return opt.value;
                }) : ((el.type == 'radio' || el.type == 'checkbox') && !el.checked) ? null : el.value;
                $splat(value).each(function(val){
                if (typeof val != 'undefined') json[el.name] = val;
            });
        });
        return json;
    }
    
});

<form id=options>
    <p>
        from <input id=from type=text value=0><br>
        to <input id=to type=text value=275>
    </p>
    <p>
        Transition <select name=transition>
            <option>linear</option>
            <option>pow:in</option>
            <option>pow:out</option>
            <option>pow:in:out</option>
            <option>expo:in</option>
            <option>expo:out</option>
            <option selected>expo:in:out</option>
            <option>circ:in</option>
            <option>circ:out</option>
            <option>circ:in:out</option>
            <option>sine:in</option>
            <option>sine:out</option>
            <option>sine:in:out</option>
            <option>back:in</option>
            <option>back:out</option>
            <option>back:in:out</option>
            <option>bounce:in</option>
            <option>bounce:out</option>
            <option>bounce:in:out</option>
            <option>elastic:in</option>
            <option>elastic:out</option>
            <option>elastic:in:out</option>
            <option>quad:in</option>
            <option>quad:out</option>
            <option>quad:in:out</option>
            <option>cubic:in</option>
            <option>cubic:out</option>
            <option>cubic:in:out</option>
            <option>quart:in</option>
            <option>quart:out</option>
            <option>quart:in:out</option>
            <option>quint:in</option>
            <option>quint:out</option>
            <option>quint:in:out</option>
        </select>
    </p>
    <p>
        Duration: <input type=text name=duration value=1500>
    </p>
    <p>
        FPS <input type=text name=fps value=50>
    </p>
    <p>
    <input type=submit value=Draw!> <button id=clear>Clear Canvas</button>
    </p>
</form>
<p id=canvas></p>

body { font-family: helvetica, arial; }

#options {
    margin-top: 20px;
    padding: 10px;
    background: #f0f0f0;
    border: solid 1px #888;
    float: left;
    width: 250px
}

p {
    margin-top: 1em;
    margin-bottom: 1em;
}

#canvas p {
    position: relative;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    height: 3px;
    width: 4px;
    margin-top: 0;
    margin-bottom: 0;
    position: absolute;
}

#canvas p b {
    display: none;
    position: absolute;
    left: 15px;
    top: 5px;
    background: #585858;
    color: #fff;
    font-size: 10px;
    z-index: 2;
    padding: 2px 3px;
    font-weight: normal;
}

#canvas p:hover b {
    display: block;
}

#canvas {
    position: relative;
    margin-left: 280px;
}