On 2023-02-10, Tuxedo <
tuxedo@mailinator.net> wrote:
This prints a plain text string one character at the time into a div:
<script>
var msg_i = 0;
var msg_txt = 'Scrolling text';
function message() {
if (msg_i < msg_txt.length) {
document.getElementById("message").innerHTML += msg_txt.charAt(msg_i); msg_i++;
setTimeout(message, 50);
}
}
window.onload = function(){
message();
}
</script>
<div id="message"></div>
The dimensions of the div gradually expand while other elements reposition themselves into how the final document is arranged, which depending on the display, is not necessarily ideal.
Secondly, the text is a JS string, while it better belongs as typed text within the document's body.
Another scrolling text version below has the text string in the body with an (almost) transparent message div, whereby each character is enclosed in individually numbered ID spans:
<style>
#message > span{
opacity:0.1;
}
</style>
<script>
var msg_i = 0;
var msg_txt = 13;
function message() {
if (msg_i < msg_txt) {
document.getElementById(msg_i).style.opacity="1";
msg_i++;
setTimeout(message, 50);
}
}
window.onload = function(){
message();
}
</script>
</head><body>
<div id="message">
<span id="0">s</span><span id="1">c</span><span id="2">r</span><span
id="3">o</span><span id="4">l</span><span id="5">l</span><span id="6">i</span><span id="7">n</span><span id="8">g</span>
<span id="9">t</span><span id="10">e</span><span id="11">x</span><span
id="12">t</span>
</div>
By initially displaying transparent text, the dimensions of the div and text segment are known as the document first loads and so everything else on the page remains unchanged while each letter becomes fully visible.
However, with all the spans and IDs in the message segment, it's not maintenance friendly for anything except short text strings.
Can Javascript extract the total number of characters in a div and
thereafter assign sequential IDs to each character within? If so, running
the transparent to non-transparent conversion loop could be done without the
<span> cluttered HTML parts.
Or are there better JS/CSS methods to create this same type of effect?
Many thanks for any ideas.
Without wishing to condone the general terribleness of animated text,
I'd do something like the below perhaps:
* message is in the HTML as simple text
* doesn't use hundreds of tiny elements
* the browser calculates the necessary size of the message container
automatically, and it never changes
* wraps properly - words don't appear and then jump to the next line
<div id="scroll">
<span style="opacity: 0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi a nisl quis erat viverra mollis at sit amet sapien.
Praesent felis dui, blandit sed urna sit amet, hendrerit
lobortis augue. Nulla eros nibh, efficitur ac elit et,
convallis sagittis eros. Donec accumsan varius dui eget
consectetur. Ut blandit vehicula lobortis. Donec commodo
lectus sollicitudin lectus ultricies, ornare posuere elit
rhoncus. Curabitur vehicula auctor eros, quis pellentesque
erat.
</span>
</div>
<script>
const message = document.getElementById('scroll').textContent.trim()
function scroll () {
const output = document.getElementById('scroll')
const length = output.firstChild.nodeType === 3
? output.firstChild.length + 1
: 1
if (length > message.length) return
output.textContent = message.substring(0, length)
if (length < message.length) {
const remaining = document.createElement('span')
remaining.style.opacity = '0'
remaining.textContent = message.substring(length)
output.appendChild(remaining)
}
setTimeout(scroll, 50)
}
scroll()
</script>
--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)