Displaying images on page with a shooting bullet effect

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!

Answers


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.


Need Your Help

Finding all groups that a user manages

c# active-directory ldap

We got a special multivalue attribute. Let's call it ourOwnManagedBy which can contain users or groups (their DN) that manages the current group.

ajaxForm using codeigniter insert image into images folder not working

codeigniter ajaxform

Hi i have this form which i uses ajaxForm to submit my images in the images folder. I already have the library for the ajaxForm when i tried to upload an image, ive noticed that the image i upload ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.