jamescolin

Looping Typewriter in Cheetah

Jun 10th, 2022 (edited)
277
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.26 KB | None | 0 0
  1. <!-- loop between a number of sentences in a typewriter style -->
  2.  
  3. <div id="mysentences"></div>
  4.  
  5. <style>
  6. #mysentences {
  7. font-family: Verdana, Geneva, sans-serif;
  8. font-size: 30px;
  9. letter-spacing: 2px;
  10. word-spacing: 2px;
  11. color: #000000;
  12. font-weight: 400;
  13. text-decoration: none;
  14. font-style: normal;
  15. font-variant: normal;
  16. text-transform: none;
  17. }
  18. </style>
  19.  
  20. <script>
  21. const jamessentences = [
  22. "FROM ‘IF’ BY RUDYARD KIPLING (1910)",
  23. "If you can keep your head when all about you",
  24. "Are losing theirs and blaming it on you,",
  25. "If you can trust yourself when all men doubt you,",
  26. "But make allowance for their doubting too;",
  27. "If you can wait and not be tired by waiting,",
  28. "Or being lied about, don’t deal in lies,",
  29. "Or being hated, don’t give way to hating,",
  30. "And yet don’t look too good, nor talk too wise:",
  31. ];
  32. const jamesspeed = 100; // time in milliseconds between each letter
  33. const jamespause = 2000; // time in milliseconds to pause
  34. const jamesloop = 0; // number of times to display sentences (0 = infinite)
  35.  
  36. typeWriter(0,jamessentences,0,jamesspeed,jamespause,jamesloop);
  37.  
  38. function typeWriter(i,txt,texti,speed,pause,loop) {
  39. if (i==0) document.getElementById('mysentences').innerHTML = '';
  40.  
  41. if (i < txt[texti].length) {
  42. document.getElementById('mysentences').innerHTML += txt[texti].charAt(i);
  43. i++;
  44. setTimeout(function() {
  45. typeWriter(i,txt,texti,speed,pause,loop);
  46. }, speed);
  47. } else {
  48. i = 0;
  49. texti++;
  50. if (texti == txt.length) {
  51. loop--;
  52. if (loop == 0) return;
  53. texti = 0;
  54. }
  55. setTimeout(function() {
  56. cleanUpTypeWriter(i,txt,texti,speed,pause,loop);
  57. }, pause);
  58. }
  59. }
  60.  
  61. function cleanUpTypeWriter(i,txt,texti,speed,pause,loop) {
  62. if (document.getElementById('mysentences').innerHTML == '') {
  63. typeWriter(i,txt,texti,speed,pause,loop);
  64. } else {
  65. document.getElementById('mysentences').innerHTML = document.getElementById('mysentences').innerHTML.slice(0, -1);
  66. setTimeout(function() {
  67. cleanUpTypeWriter(i,txt,texti,speed,pause,loop);
  68. }, speed/10);
  69. }
  70. }
  71. </script>
Add Comment
Please, Sign In to add comment