Бегущая строка с параметрами
 

Доброго времени суток.
Прошу помочь с такой таской:
"Создайте бегущую строку. С помощью JavaScript добавьте элементы регулировки следующих параметров: скорость движения текста, цвет текста, направление движения текста, содержание текста."

Спасибо за внимание.

Час убил, но написал. :)

.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/

Ruslan_xDD,
Спасибо огромное!

Ruslan_xDD,
К сожалению я настолько туп, что должен спросить: А что насчёт регулировки направления текста?
И прошу прощения за то, что напрягаю.

Доработал класс.

Теперь можно динамически менять текст и задавать отрицательную скорость.

https://jsfiddle.net/8kttm17v/1/

P.S.: положительная скорость - текст движется слева направо, а отрицательная - наоборот.

Огромнейшее :)