how to create webpage typewriter effect using javascript

the effect that you see on hacker website can be easily accomplished with javascript..

<!DOCTYPE html>
<html>
   <body onload="typeWriter()">
      <body onload="window.resizeTo(640,480)">
   </body>
   <div class="ele-scroll"  id="demo"></div>
   <style type="text/css">
      body{
         background:#000000;
         color:#00FF00;
         font-family:monospace;   
      }
      div{
         font-size: 20px;
      }
      .ele-scroll{
      position: absolute;
      top: 0px;
      bottom: 0px;
      overflow-y: auto;
      overflow: hidden;
      }
   </style>
   <script>
      var txt = 'facebook AI research has announced transcoder, a system that uses unsupervised deep-learning to convert code from one programming language to another. transcoder was trained on more than 2.8 million open source projects and outperforms existing code translation systems that use rule-based methods';
      var speed =250;
      var str=txt.split(",");
      function typeWriter() {
        if (str.length>0) {
         var elescroll=document.getElementById("demo");
         elescroll.scrollTop=elescroll.scrollHeight;
          document.getElementById("demo").innerHTML += str.shift();
          }
          else{
          document.getElementById("demo").innerHTML='';
          str=txt.split("");
          }  
            setTimeout(typeWriter, speed);
        }
        typeWriter();
   </script>
   </body>
</html>
how to create webpage type automatically word using javascript

Post a Comment

0 Comments