총알 효과가있는 페이지에 이미지 표시

Question

HTML5 및 가능한 자바 스크립트에 대한 지침이 필요합니다.

아이디어는 웹 페이지에서 이미지 목록 (몇 분 간격으로 이미지 목록이 변경됨)을 표시하는 것입니다. 그러나 각 이미지는 흔적이있는 과속 총알의 효과와 함께 페이지로 미끄러 져 들어갈 것입니다. 이미지가 쌓여 몇 초 동안 디스플레이에 머문 다음 새 이미지가 디스플레이에 푸시됩니다 (디스플레이에서 제거 된 이전 이미지).

이미지를 시세표처럼 생각하십시오. 그러나 많은 상인은 서로의 위에 겹쳐 쌓였다.

HTML5에이를 수행 할 수있는 기능이 있습니까? 또는이 효과를 사용할 수있는 자바 스크립트 라이브러리가 있습니까?

미리 도움 주셔서 감사합니다.

Answer 1

나는 최근에 내 자신의 시세 클래스는, 사용자의 요구에 연장 자유롭게 쓴 :

// 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; 
}; 

사용법 :

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

ticker.auto_reset = true; 

또한하여 현재 진행 상황을 얻을 수 있습니다 status() 메서드 호출.
0.0에서 1.0까지 현재 진행 상황을 나타내는 숫자를 반환합니다.