JSFiddle - React, Tailwind, and code Playground
CSS
.Ticker {
background: #000;
font-size: 15pt;
height: 30px;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.Ticker span {
margin: 3px 0;
position: absolute;
}
JavaScript
//By Ruslan_xDD
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);
this._left = this.self.clientWidth / 2 - this._textElement.clientWidth / 2;
this.play();
},
play: function() {
this.stop();
this._state = 1;
this._enterFrame();
},
stop: function() {
this._state = 0;
},
_enterFrame: function() {
if(this._state == 1) {
var w1 = this._textElement.clientWidth,
w2 = this.self.clientWidth;
this._left += this.speed / 10;
if(this.speed < 0 ? this._left < -w1 : this._left > w2) {
this._left = this.speed < 0 ? w2 : -w1;
}
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._text = value;
if(textElement.firstChild) {
textElement.removeChild(textElement.firstChild);
}
textElement.appendChild(textNode);
}
};
Ticker.DEFAULT_COLOR = '#FF0000';
Ticker.DEFAULT_SPEED = 10;
var myTicker = new...