I would like the script to be a text that is being written slowly. I found it easily here in SOpt, the link is this: Text that is typed in the Few?
However, I would like an increment that I did not find. Next: After you finish writing the text, delete everything and write a different text. I would also like an infinite loop of it. Ex:
Type text 1
Delete
Type text 2
Delete
Type text 1
Delete
And so on.
Following my other response, developing the code further might be something like this (asynchronous):
var div = document.getElementById('log');
var textos = ['Hoje está um lindo dia!', 'Ontem também... lindo lindo!', 'Amanha ouvi dizer que vai chover... vamos ver...', 'Boa noite, até amanhã.', 'Bons sonhos...zzZZZzzzz......'];
function escrever(str, done) {
var char = str.split('').reverse();
var typer = setInterval(function() {
if (!char.length) {
clearInterval(typer);
return setTimeout(done, 500); // só para esperar um bocadinho
}
var next = char.pop();
div.innerHTML += next;
}, 100);
}
function limpar(done) {
var char = div.innerHTML;
var nr = char.length;
var typer = setInterval(function() {
if (nr-- == 0) {
clearInterval(typer);
return done();
}
div.innerHTML = char.slice(0, nr);
}, 100);
}
function rodape(conteudos, el) {
var atual = -1;
function prox(cb){
if (atual < conteudos.length - 1) atual++;
else atual = 0;
var str = conteudos[atual];
escrever(str, function(){
limpar(prox);
});
}
prox(prox);
}
rodape(textos);
If you do not need to clean up like I put in the example above, then it might get simpler ... something like:
function escrever(str, done) {
var char = str.split('').reverse();
var typer = setInterval(function() {
if (!char.length) {
clearInterval(typer);
return setTimeout(done, 500); // só para esperar um bocadinho
}
var next = char.pop();
div.innerHTML += next;
}, 100);
}
function rodape(conteudos, el) {
var atual = -1;
function prox(){
if (atual < conteudos.length - 1) atual++;
else atual = 0;
var str = conteudos[atual];
escrever(str, function(){
div.innerHTML = '';
prox();
});
}
prox();
}
rodape(textos);
There is Typed that does what you are looking for, being able to set intervals at typing time, breaks of lines, etc. In the readme of the project there is more information on how to customize it, if necessary.
For the purpose you are looking for, this is enough:
$(function(){
$('#text').typed({
strings: [
'Eu queria o Superuser PT',
'Mas... ^1000 ... ^1000 tudo bem...',
'Me contento somente com o StackOverflow em Português mesmo :)'
],
typeSpeed: 0
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://raw.githubusercontent.com/mattboldt/typed.js/master/dist/typed.min.js"></script>
<span id='text'></span>If you want the cursor blinking, you need to add a rule in your CSS, see the code snippet below:
$(function(){
$('#text').typed({
strings: [
'Eu queria o Superuser PT',
'Mas... ^1000 ... ^1000 tudo bem...',
'Me contento somente com o StackOverflow em Português mesmo :)'
],
typeSpeed: 0
});
});.typed-cursor {
opacity: 1;
-webkit-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink {
0%, 100% { opacity:1 }
50% { opacity:0 }
}
@-webkit-keyframes blink {
0%, 100% { opacity:1 }
50% { opacity:0 }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://raw.githubusercontent.com/mattboldt/typed.js/master/dist/typed.min.js"></script>
<span id='text'></span>