Час убил, но написал.
.Ticker {
background: #000;
font-size: 15pt;
height: 30px;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.Ticker span {
margin: 3px 0;
position: absolute;
}
function Ticker(data) {
data = data || {};
this._enterFrameCallback = this._enterFrame.bind(this);
this.self = document.createElement('div');
this.self.classList.add('Ticker');
this._textElement = document.createElement('span');
this.self.appendChild(this._textElement);
this.color = data.color || Ticker.DEFAULT_COLOR;
this.speed = data.speed || Ticker.DEFAULT_SPEED;
this.text = data.text || '?????';
};
Ticker.prototype = {
insertTo: function(element) {
element.appendChild(this.self);
},
play: function() {
this.stop();
this._state = 1;
this._enterFrame();
},
stop: function() {
this._state = 0;
},
_enterFrame: function() {
if(this._state == 1) {
this._left -= this.speed / 10;
if(this._left < -this._textElement.clientWidth) {
this._left = this.self.clientWidth;
}
this._textElement.style.left = this._left + 'px';
requestAnimationFrame(this._enterFrameCallback);
}
},
get color() {
return this._color;
},
get speed() {
return this._speed;
},
get text() {
return this._text;
},
set color(value) {
this._color = value;
this.self.style.color = value;
},
set speed(value) {
this._speed = value;
},
set text(value) {
var textElement = this._textElement,
textNode = document.createTextNode(value);
this._left = this.self.clientWidth;
this._text = value;
if(textElement.firstChild) {
textElement.removeChild(textElement.firstChild);
}
textElement.appendChild(textNode);
this.play();
}
};
Ticker.DEFAULT_COLOR = '#FF0000';
Ticker.DEFAULT_SPEED = 10;
Инициализация:
var myTicker = new Ticker();
myTicker.text = 'Hello World!';
myTicker.insertTo(document.body);
var myTicker = new Ticker({color: 'green', speed: 5, text: 'foo'});
myTicker.insertTo(document.body);
var myTicker = new Ticker();
myTicker.color = 'blue';
myTicker.speed = 8;
myTicker.text = 'Добрый день!';
myTicker.insertTo(document.body);
Живой пример:
https://jsfiddle.net/8kttm17v/
