I recently found this closed thread which I am really thankful because it works great for the typewriter effect. (https://www.wix.com/velo/forum/coding-with-velo/typewriter-effect) I wanted to reference it here to make is easier to understand what I am trying to accomplish even though it is a closed thread.
Basically I want to try and have 3 stances of the typewriter effect happening on the same page.
Can someone help? I apologize for my lack of code knowledge
this is what I tried so far
let i = 1, letterInterval = 200, pauseBetweenWords = 3000; //ms const sentence = `Word1, Word2, Word3,`; const sentence2 = `Word4, Word5, Word6,`; const sentence3 = `Word7, Word8, Word9,`; const words = sentence.split(' '); const words2 = sentence2.split(' '); const words3 = sentence3.split(' '); let index = 0; const runTyping = (ms) => setTimeout(() => showText(), ms); function showText() { const text = words[index]; $w('#text1').text = text.slice(0, i); i = (i + 1) % (text.length + 1); if (i > 0) { runTyping(letterInterval); } else { index++; index %= (words.length); runTyping(pauseBetweenWords); } } function showText2() { const text2 = words2[index]; $w('#text2
').text2 = text2.slice(0, i); i = (i + 1) % (text2.length + 1); if (i > 0) { runTyping(letterInterval); } else { index++; index %= (words.length); runTyping(pauseBetweenWords); } } $w.onReady(() => runTyping(letterInterval)); $w.onReady(() => runTyping(letterInterval));
I'm trying to do a text animation where a new word populates and makes the last word disappear, in the same place... anyone can help?
Yes each word letter by letter. nothing else
it is just not typewriting any longer but this is it!
The text block will show something like this: 1 word per line line1, =(anyword from W1, W2, W3)
line2, =(anyword from W4, W5, W6)
line3 =(anyword from W7, W8, W9) just one word per line selected randomly
In a loop
J.D. This is what it shows when I test it. it seems like it never shuffles. the example on the left is my old html code.
Word by word and infinite loop! world pool1 = "A, B, C"
world pool2 = "D, E, F"
world pool3 = "G, H, J"
display
line1: any word from world pool1 line2 : any word from world pool2 line3 : any word from world pool3 they all can start typing at same time all lines at once or top line to bottom line after each <br /> with a longer pause so user can ready 3 words phrase. I got it working with all code with the help of a friend but it's not super clear and not completely random order. I shuffled the phrases manually. ideally the pool would look something like this:
<a href="" class="typewrite" id="typewrite" data-period="4000" data-type='[ "Apple, <br/> Ball, <br/> Cotton", "Single, <br /> Double, <br/> Triple ", "Awesome, <br/> Super, <br/> Great", > Detail" ]' style="text-decoration: none;">
Here is the code:
<h1>
<a href="" class="typewrite" id="typewrite" data-period="4000" data-type='[ "All the possible shuffling options inserted manually", "A, <br/> E, <br/> G", "C, <br /> D, <br/> J", "A, <br/> F, <br/> H", > Detail" ]' style="text-decoration: none;">
<span class="wrap"></span>
</a>
</h1>
<script type="text/javascript">
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
var that = this;
var delta = 200 - Math.random() * 1000;
if (this.isDeleting) { delta /= 2; }
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 50;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.em solid #ffb; font-size: 55px; color: #009999; font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;}";
document.body.appendChild(css);
};
</script>
Do you want to have them show up letter by letter or word by word?
Do you want to have an infinite loop over and over again or one time only?