Typpingeffect using HTML, CSS and Javascript. Good looking example of Typpingeffect

Typpingeffect using HTML, CSS and Javascript. Good looking example of Typpingeffect

Avatar

 BY TEJAS




For making this Typpingeffect Example, we use HTML5, CSS3, and Javascript. It is very easy to make this Typpingeffect example we use very simple tags and attributes in this example.



Working with this example is when the user clicks the button then Paragraph is written automatically It is very simple anyone can do it who's have little bit knowledge of HTML, CSS & Javascript.


In below video shows working of the Typpingeffect


below here is a HTML, CSS, & JavaScript codes.




demo.html :-
      
        <!DOCTYPE html>
        <html>
        
        <head>
          <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
          <meta charset="utf-8">
          <title>Typping Effect | By ProgramTuts</title>
          <style>
            .body {
              background-color: grey;
            }
        
            .button {
              color: green;
              font-size: 50px;
              font-weight: bold;
              border-radius: 20px;
            }
        
            .p {
              font-family: 'Lobster', cursive;
              font-size: 40px;
              color: white;
            }
          </style>
        </head>
        
        <body class="body">
          <center>
            <div>
              <h1>Click the Button to See the Effect</h1><br><br>
              <button onclick="typeWriter()" onMouseOver="this.style.color='red'" onMouseOut="this.style.color='green'"
                class="button">Click me</button>
              <br><br>
              <p id="demo" class="p"></p>
            </div>
          </center>
          <script>
            var i = 0;
            var txt = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
            var speed = 50;
        
            function typeWriter() {
              if (i < txt.length) {
                document.getElementById("demo").innerHTML += txt.charAt(i);
                i++;
                setTimeout(typeWriter, speed);
              }
            }
          </script>
          <br><br><br><br>
          <strong style="font-family: 'Lobster', cursive; font-size:40px; color: yellowgreen;">By ProgramTuts</strong>
        </body>
        
        </html>
      
  
      
        <!DOCTYPE html>
        <html>
        
        <head>
          <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
          <meta charset="utf-8">
          <title>Typping Effect | By ProgramTuts</title>
          <style>
            .body {
              background-color: grey;
            }
        
            .button {
              color: green;
              font-size: 50px;
              font-weight: bold;
              border-radius: 20px;
            }
        
            .p {
              font-family: 'Lobster', cursive;
              font-size: 40px;
              color: white;
            }
          </style>
        </head>
        
        <body class="body">
          <center>
            <div>
              <h1>Click the Button to See the Effect</h1><br><br>
              <button onclick="typeWriter()" onMouseOver="this.style.color='red'" onMouseOut="this.style.color='green'"
                class="button">Click me</button>
              <br><br>
              <p id="demo" class="p"></p>
            </div>
          </center>
          <script>
            var i = 0;
            var txt = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
            var speed = 50;
        
            function typeWriter() {
              if (i < txt.length) {
                document.getElementById("demo").innerHTML += txt.charAt(i);
                i++;
                setTimeout(typeWriter, speed);
              }
            }
          </script>
          <br><br><br><br>
          <strong style="font-family: 'Lobster', cursive; font-size:40px; color: yellowgreen;">By ProgramTuts</strong>
        </body>
        
        </html>
      
  

Search
Advertisement
Share With
Follow us on
Advertisement