Question

I want some guidance on HTML5 and a possible Javascript library.

The idea is to display a list of images (the list of images will change every few minutes) on a web page. But each image would slide into the page with the effect of a speeding bullet with a trail. Images would stack up and stay in display for a few seconds and then new images would be pushed into the display (the old ones taken out of the display).

Think of it like a ticker of images; but many tickers stacked up on top of each other.

Are there any features in HTML5 that can accomplish this? Or any Javascript libraries that can enable this effect?

Thanks in advance for your help!

Answer 1

I recently wrote my very own ticker class, feel free to extend it to your needs:

// An advanced timeout class which also calculates the current progress
var Ticker = function(start, duration, callback) {

    var _this = this;

    this.start = start;
    this.duration = duration;

    // TODO easing options

    this.reverse = false;
    this.auto_reset = false;
    this.auto_reverse = false;

    this.callback = callback ? callback : null;
    this.timeout = callback ? setTimeout(function() {
        _this.callback();
        if (_this.auto_reset || _this.auto_reverse) { _this.reset(); }
    }, this.duration) : null;
};

Ticker.prototype.status = function() {
    var end = this.start + this.duration;
    var current = +new Date;
    var duration = end - this.start;
    var difference = current - this.start;
    var progress = this.reverse ? 1 - (difference / duration) : (difference / duration);

    if (current >= end) { progress = this.reverse ? 0 : 1; }

    return progress;
};

Ticker.prototype.reset = function() {
    if (this.auto_reverse) { this.reverse = this.reverse ? false : true; }

    var _this = this;
    this.timeout = this.callback ? setTimeout(function() {
        _this.callback();
        if (_this.auto_reset || _this.auto_reverse) { _this.reset(); }
    }, this.duration) : null;

    this.start = +new Date;
};

Usage:

// Tickers every 1000 ms
var ticker = new Ticker(+new Date, 1000, function() {
    console.log("done");
});

ticker.auto_reset = true;

You can also get the current progress by calling the status() method.
It returns a number representing the current progress from 0.0 to 1.0.