Pure js to achieve typewriter effect

This article example shares the specific code of js to achieve the typewriter effect for your reference. The specific content is as follows

Rendering

Application Scenario

It's not very useful. I just saw a similar effect on the Internet and wrote 40 or 50 lines of code that I couldn't understand, so I tried to see if it could be easily implemented.

html

<h2 id="text-box"></h2>
<!--One line is also code-->
CSS

        h2 {
   width: 800px;
   line-height: 40px;
   border-bottom: 1px solid;
   margin: 200px auto;
   font-size: 24px;
  }
  
  .animate {
   display: inline-block;
   padding: 0 5px;
   vertical-align: 3px;
   font-size: 20px;
   font-weight: normal;
  }
  
  .animate.on {
   animation: fade 1.5s infinite forwards;
  }
  
  @keyframes fade {
   from {
    opacity: 0;
   }
   to {
    opacity: 1;
   }
  }

js

let textBox = $('#text-box');
let index = 0;
let str = 'Welcome to my website!';
 
  let len ​​= str.length;
 
  function input() {
 
   textBox.html(str.substr(0, index) + '<span class="animate">|</span>');
 
   setTimeout(function() {
    index++;
 
    if(index === len + 1) {
     $('.animate').addClass('on');
     return;
    }
 
    input();
 
   }, Math.random() * 600)
 
   console.log(index);
  }
 
  input();

Implementation principle

The timer is combined with string interception to achieve a typewriter-like sense of frustration, and the index is accumulated through recursion. This is equivalent to intercepting one byte at the first second, intercepting two bytes at the second second, and so on... The timer takes a random number to better simulate the pause feeling of typing. Add an end loop condition to the recursive call and start the animation before the end to simulate the cursor jumping.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.