JSFiddle - React, Tailwind, and code Playground
HTML
<body style="margin: 0 auto;">
<div class="scroll">
<div class="scrollContainer">
<div class="scrollText"></div>
</div>
</div>
<div>
<div>
<div id="me"></div>
</div>
</div>
<div>
<div>
<div id="try">another scroll</div>
</div>
</div>
</body>
JavaScript
$(function () {
function Scroll() {
}
$.extend(Scroll.prototype, {
config: {
text: 'hello everybody',
speed: 1500,
container: $('.scrollText'),
width: 250,
parent: $('.scrollContainer'),
parentContainer: $('.scroll'),
textWidth: 0,
totalWidth: 0
},
setupHtml: function (config) {
config.container.html(config.text.trim())
.css('display', 'inline-block');
return this;
},
setupCss: function (config) {
config.textWidth = config.container.width();
config.container.css({
width: config.textWidth + 10,
'margin-right': config.width,
'margin-left': config.width
});
return this.parentCss(config);
},
parentCss: function (config) {
config.totalWidth = config.container.outerWidth(true);
config.parentContainer.css({
width: config.width,
overflow: 'hidden',
margin: '0 auto'
});
return this;
},
animate: function (config, container) {
container.animate({
'margin-left': '-=' + (config.totalWidth - config.width)
}, config.speed, this.repeat.bind(this, config, container));
return this;
},
repeat: function (config, container) {
container.css('margin-left', config.width);
this.animate(config, container);
},
init: function (config) {
config = $.extend({}, this.config, config);
return this.setupHtml(config)
.setupCss(config)
.animate(config, config.container);
}
});
$.fn.scrollText = function (config) {
return this.each(function () {
new Scroll().init({
...