Currently, I am working on creating a banner with moving text. While I have managed to come up with a solution for implementing this effect, there are two significant issues that I am facing.
- The width values in pixels need to be manually adjusted based on the length of the text.
- This implementation results in the body size becoming larger in terms of width, rather than remaining 100% or the same size as the window.
I would greatly appreciate any suggestions on how to overcome these challenges or if there is a more effective way to achieve this banner with moving text?
let txtAnnounce = document.createElement('div');
txtAnnounce.style = 'display: block; position: absolute; width: 600px; height: 45px; top: 65px; left: 0px; color: white; line-height: 45px; text-align: center;';
txtAnnounce.innerHTML = "Some text blah blah blach... Good for announcements with long text....! :) "
document.body.appendChild(txtAnnounce);
let txtAnnounce2 = document.createElement('div');
txtAnnounce2.style = 'display: block; position: absolute; width: 600px; height: 45px; top: 65px; left: 600px; color: white; line-height: 45px; text-align: center;';
txtAnnounce2.innerHTML = "Some text blah blah blach... Good for announcements with long text....! :) "
document.body.appendChild(txtAnnounce2);
let curLeft = 0;
let curLeft2 = 0;
setInterval(function() {
curLeft--;
curLeft2--;
if (curLeft < -600) {
curLeft = 0;
}
if (curLeft2 < 0) {
curLeft2 = 600;
}
txtAnnounce.style.left = curLeft.toString() + 'px';
txtAnnounce2.style.left = curLeft2.toString() + 'px';
}, 10);<div id="announce" style="position: absolute; display: block; top: 65px; left: 0px; border-bottom: 1px solid #cccccc; height: 45px; width: 100%; background-color: #008aff; color: white; text-align: center; line-height: 45px; font-family: Arial, Helvetica, sans-serif;"></div>