I have a simple animation code, looks like a console input.

Originally from:

Code:

<script>
        //console
        var textarea = $('.term');
        var text = 'ping life';

        var i = 0;

        runner();

        function runner() {
            textarea.append(text.charAt(i));
            i  ;
            setTimeout(
                function () {
                    runner();
                }, Math.floor(Math.random() * 1000)   50);
        }
    </script>

Now the effect that I want is a bit complex, for me at least, as my knowledge about JQuery is limited. I wanted the code to enter ping life, then backspace completely, repeat infinitely. I looked up on how to simulate backspace in JQuery, using escape sequence of (8), but I am not sure how to use the escape sequence, nor implement the function into the existing recursive function, for it to repeat infinitely.

Any help would be wonderful :)

CodePudding user response：

Like this? Counting like this will give a zigzag like counting pattern. I added buffers for start and end of input, and a fixed timeout for deleting letters.

textarea.text(text.substr(0, i)) selects a substring of your text (treated as an array of letters - selecting everything between index 0 and i)

Easier than appending and deleting letters

var direction = 1;
var i = 0;
var textarea = $('.term');
var text = 'ping life';

// NOTE:
// I added the "@dev:~$ " as css:before elem, easier to write the code

function count() {
    i  = direction;
    direction *= (((i % text.length) == 0) ? -1 : 1);
    textarea.text(text.substr(0, i));
    clearInterval(time);
    
    // direction is 1 if counting up
    if (direction === 1) {
        if (i === 0) {
            // buffer for start
            time = setInterval(count, 1000);
        } else {
            time = setInterval(count, Math.floor(Math.random() * 1000)   50);
        }
    } else {
        // direction is -1 if counting down
        if (i === text.length) {
            time = setInterval(count, 1500);
        } else {
            // buffer for end
            time = setInterval(count, 100);
        }
    }
   
}

// inital interval
// setTimeout doesn't work well here
var time = setInterval(count, 1000)

html,
body {
  margin: 0 auto;
  height: 100%;
}

pre {
  padding: 0;
  margin: 0;
}

pre::before {
  content: "@dev:~$ ";
  color: white;
}

.load {
  margin: 0 auto;
  min-height: 100%;
  width: 100%;
  background: black;
}

.term {
  font-family: monospace;
  color: #fff;
  opacity: 0.8;
  font-size: 2em;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 10px;
  padding-left: 20px;
}

.term:after {
  content: "_";
  opacity: 1;
  animation: cursor 1s infinite;
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <pre ></pre>
</div>