Advertisement
1xptolevitico69

Looping typewriter effect

Aug 13th, 2022 (edited)
882
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.79 KB | Source Code | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <link rel="shortcut icon" href="https://1xpto.netlify.app/items/favicon.gif" type="image/x-icon">
  6.   <meta charset="UTF-8">
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.   <meta name="keywords" content="loop,typewriter,effect,media">
  9.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.   <title>Looping typewriter effect</title>
  11.   <style>
  12.     button {
  13.       border: 0;
  14.       outline: 0;
  15.       background-color: red;
  16.       color: white;
  17.       position: fixed;
  18.       top: 0;
  19.       left: 0;
  20.       margin: 5px;
  21.       padding: 5px 20px;
  22.       font-size: 20px;
  23.     }
  24.  
  25.     body {
  26.       margin: 0;word-wrap: break-word;
  27.     }
  28.  
  29.  p {
  30.       font-family: calibri;
  31.       font-weight: bold;
  32.       text-align: justify;
  33.       font-size: 2vw;
  34.       padding: 100px 20px 20px 20px;
  35.     }
  36.  
  37.     @media all and (orientation:portrait) {
  38.       p {
  39.         font-size: 16px;
  40.         width: 90%;
  41.         margin: auto;
  42.         padding: 100px 0 20px 0;
  43.       }
  44.      }
  45.  
  46.  
  47.     @media all and (orientation:landscape) and (max-width:768px) {
  48.       p {
  49.         font-size: 16px;
  50.         width: 90%;
  51.         margin: auto;
  52.         padding: 100px 0 20px 0;
  53.       }
  54.     }
  55.   </style>
  56. </head>
  57.  
  58. <body>
  59.   <button onclick='stoploop()'>Stop Loop</button>
  60.   <p></p>
  61.   <h1>
  62.  
  63.  
  64.   <script>
  65.     text = document.getElementsByTagName('h1')[0].innerHTML;
  66.     length = text.length;
  67.     p = document.getElementsByTagName('p')[0];
  68.     i = 0;
  69.     x = setInterval(foo, 1000 / 60);
  70.  
  71.     function foo() {
  72.       p.innerHTML += text[i];
  73.       i++;
  74.       window.scrollBy(0, 100);
  75.       if (i == length) {
  76.         i = 0;
  77.         foo();
  78.       }
  79.     }
  80.     (stoploop = () => {
  81.       clearInterval(x);
  82.     })
  83.   </script>
  84. </body>
  85.  
  86. </html>
  87.  
  88.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement