Advertisement
1xptolevitico69

JAVASCRIPT typewriter effect

Jan 20th, 2022
1,243
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.95 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>JAVASCRIPT typewriter effect</title>
  8.     <style>
  9.  
  10. #txt {
  11.   display: none;
  12. }
  13. .box {
  14.   width: 90%;
  15.   height: 95vh;
  16.   border: 5px solid red;
  17.   margin: auto;
  18.   overflow-y: scroll;
  19. }
  20. #title {
  21.   position: fixed;
  22.   left: 30%;
  23.   width: 40%;
  24.   text-align: center;
  25.   font-family: arial black;
  26.   color: snow;
  27.   background-color: navy;
  28.   padding: 5px 20px;
  29. }
  30. #display {
  31.   font-family: arial black;
  32.   color: maroon;
  33.   font-size: 25px;
  34.   text-align: justify;
  35.   text-indent: 100px;
  36.   margin: 150px 10px 20px 20px;
  37. }
  38.  
  39.  
  40.  
  41.  
  42. </style>
  43. </head>
  44. <body>
  45.  
  46. <div class='box'>
  47.  <h1 id='title'>Typewriter effect</h1>
  48.   <h1 id='display'></h1>
  49.   <span id='txt'>Doubtful two bed way pleasure confined followed. Shew up ye away no eyes life or were this. Perfectly did suspicion daughters but his intention. Started on society an brought it explain. Position two saw greatest stronger old. Pianoforte if at simplicity do estimating.
  50.  
  51.     Drawings me opinions returned absolute in. Otherwise therefore did are unfeeling something. Certain be ye amiable by exposed so. To celebrated estimating excellence do. Coming either suffer living her theirs. Furnished do otherwise daughters contented conveying attempted no. Was yet general visitor present hundred too brother fat arrival. Friend are day own either lively new.
  52.  
  53.     Resources exquisite set arranging moonlight him household had. Months had too ham cousin remove far spirit. She procuring the why performed continual improving. Civil songs so large shade in cause. Lady an mr here must neat sold. Children greatest ye extended delicate of. No elderly passage earnest as in removed winding or.
  54.  
  55.     Was justice improve age article between. No projection as up preference reasonably delightful celebrated. Preserved and abilities assurance tolerably breakfast use saw. And painted letters forming far village elderly compact. Her rest west each spot his and you knew. Estate wooded depart six far her. Of we be have it lose gate bred. Do separate removing or expenses in. Had covered but evident chapter matters anxious.
  56.  
  57.     Another journey chamber way yet females man. Way extensive and dejection get delivered deficient sincerity gentleman age. Too end instrument possession contrasted motionless. Calling offence six joy feeling. Coming merits and was talent enough far. Sir joy northward sportsmen education. Discovery incommode earnestly no he commanded if. Put still any about manor heard.</span></box>
  58.  
  59.  
  60.  
  61.   <script>
  62.  
  63. x = txt.innerHTML;
  64. i = 0;
  65. setTimeout(function(){
  66.   function read() {
  67.     c = requestAnimationFrame(read);
  68.     display.innerHTML += x[i];
  69.     i++;
  70.     if (i == x.length) {
  71.       cancelAnimationFrame(c);
  72.     }
  73.   }
  74.   read();
  75. },1000);
  76.  
  77.  
  78. </script>
  79. </body>
  80. </html>
  81.  
  82.  
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95.  
  96.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement