Text that is written slowly, erases and writes another

Asked

Viewed 3,496 times

5

I would like the script for a text that is written slowly. I found it easily here in Sopt, the link is this: Text That Is Typed Slowly?

However, I would like an increment that I didn’t find. Next: after he finishes writing the text, erase everything and write a different text. I would also like an infinite loop of this. Ex:

Writes text 1

Erases

Writes text 2

Erases

Writes text 1

Erases

And so on and so on.

javascript html

  • What you’ve tried to do?

  • I just used the same post code I quoted. I don’t understand JS, but I would like this code on my site.

  • There are two alternatives. If you used any of them and tried to adapt without success, it would be interesting to add here the code you adapted, even if it doesn’t work, so it becomes a basis for a response.

  • Both worked. But the purpose of the codes in that post is to display only one post. I made no changes, I don’t understand javascript, only PHP.

2 answers

7


Following this my other answer, developing more the code could be something like this (in asynchronous version):

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);

example: http://jsfiddle.net/mwt4bd4r/

If it is not necessary to clean as I put in the example above, then it can be 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);

example: http://jsfiddle.net/mwt4bd4r/1/

  • 1

    +1, worked well even in Windows 10 Mobile Internet Explorer. typedjs did not work as expected.

  • 1

    @Renan great! I also gave it to you +1 and gave another +1 for 'I wanted the Superuser PT' :D

  • Hello. I will test here and soon report results. Thanks for the reply.

  • 1

    It worked perfectly. Exactly what I wanted. Thank you.

3

There is the Typed which does what you are looking for, can set intervals in the typing time, line breaks, etc. In readme of the project there is more information on how to customize it, if need be.

For the purpose you are seeking, 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>
<script src="https://raw.githubusercontent.com/mattboldt/typed.js/master/dist/typed.min.js"></script>

<span id='text'></span>

If you want the blinking cursor, you need to add a rule to 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>
<script src="https://raw.githubusercontent.com/mattboldt/typed.js/master/dist/typed.min.js"></script>

<span id='text'></span>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.