Ok so I hacked something together. Please note it is very rough and should not be used in production. I am writing this at 1AM and there are no comments.
I will clean it up later.
I'll post each piece of code separately, but I'll also attach a zip if you want to just download everything
This is coded in ES6 which should be widely compatible now. If you need backwards compatibility you'll need to change that.
index.html
HTML Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="marquee.js"></script>
<link rel="stylesheet" type="text/css" href="marquee.css">
</head>
<body>
<div id="marquee"></div>
</body>
<script type="text/javascript">
let marquee = new Marquee({
"src": "test.txt",
"el": "marquee",
"delay": 3,
"duration": 10
});
</script>
</html>
marquee.js
Code:
class Marquee {
constructor(options) {
/*
options:
src:
Path to the text file containing new line delimited text to scroll (path relative from current location)
Default is "text.txt"
duration:
The amount of time in seconds for the text to scroll across the parent div (#marquee by default)
Default is 3 seconds
delay:
The amount of time between each chunk of text starting to scroll
Default is 3 seconds
el:
The ID of the element to put the scrolling text into
If this isn't provided, an element with ID #marquee is added to the page
*/
this.src = options.src || "text.txt";
this.duration = options.duration || 3;
this.delay = (options.delay * 1000) || 3000;
this.index = 0;
this.lines = [];
if(options.el) {
this.el = document.getElementById(options.el);
} else {
this.el = document.createElement("div");
this.el.id = "marquee";
document.body.appendChild(this.el);
}
this.loadFile(this.src);
setInterval(() => {
this.animate();
}, this.delay);
}
loadFile(path) {
//Reset the index
this.index = 0;
let self = this;
//Load the file containing the text with an XMLHTTPRequest
let req = new XMLHttpRequest();
req.overrideMimeType("text/plain");
req.open("GET", `./${path}`, true);
req.onreadystatechange = function() {
//If the request worked
if(req.readyState == 4 && req.status == "200") {
self.lines = req.responseText.split("\n");
}
};
req.send();
}
animate() {
//Only animate if there's text available
if(this.lines.length == 0) {
return;
}
//Create a new div to contain the scrolling text
let textEl = document.createElement("div");
textEl.innerHTML = this.lines[this.index];
textEl.style.cssText = `animation-duration:${this.duration*2}s; -webkit-animation-duration:${this.duration*2}s`;
this.el.appendChild(textEl);
this.index += 1;
//If we've reached the last line in the text file, reload it
if(this.index === this.lines.length) {
this.loadFile(this.src);
}
//Remove the container div once the scrolling text is off-screen
setTimeout(this.removeElement.bind(this, textEl), this.duration * 1000 + 3000);
}
removeElement(textEl) {
this.el.removeChild(textEl);
}
}
marquee.css
Code:
@keyframes marquee {
from {
left:100%;
}
to {
left:-100%;
}
}
@-webkit-keyframes marquee {
from {
left:100%;
}
to {
left:-100%;
}
}
#marquee {
background:#AFEEEE;
width:50%;
overflow:hidden;
position:absolute;
height:20px;
}
#marquee div {
position:absolute;
white-space:nowrap;
animation-name:marquee;
animation-timing-function:linear;
animation-iteration-count:infinite;
-webkit-animation-name:marquee;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
}
test.txt
Code:
<span style="color:blue">Example 1 - Blue</span>
<span style="font-weight:bold">Example 2 - Bold</span>
<span style="font-size:.5em">Example 3 - Small</span>
Example 4 - None
p.s. The font tag you used in your example is widely deprecated now and should not be used.
ZIP FILE
marquee.zip
Marquee Scroll with Text and Images updated from Another Document
Reply With Quote
Bookmarks