1 // *** JS Typewriter Effect ***
2
3 let i = 0;
4 let target = document.getElementById("target");
5 let text = target.innerHTML;
6 target.innerHTML = ' ';
7 let speed = 75; //speed duration of effect in millisec
8
9 typeWriter(); //to call function
10 function typeWriter() {
11 if (i < text.length) {
12 target.innerHTML += text.charAt(i);
13 i++;
14 setTimeout(typeWriter, speed);
15 }
16 }
1/*
2 Creating a Typing Effect
3-----------------------------
41) Add HTML: */
5<p id="demo"></p>
6<button onclick="typeWriter()">Click me</button>
7/*
82) Add JavaScript: */
9var i = 0;
10var txt = 'Lorem ipsum typing effect!'; /* The text */
11var speed = 50; /* The speed/duration of the effect in milliseconds */
12
13function typeWriter() {
14 if (i < txt.length) {
15 document.getElementById("demo").innerHTML += txt.charAt(i);
16 i++;
17 setTimeout(typeWriter, speed);
18 }
19}
20
1.typewriter h1 {
2 overflow: hidden; /* Ensures the content is not revealed until the animation */
3 border-right: .15em solid orange; /* The typwriter cursor */
4 white-space: nowrap; /* Keeps the content on a single line */
5 margin: 0 auto; /* Gives that scrolling effect as the typing happens */
6 letter-spacing: .15em; /* Adjust as needed */
7 animation:
8 typing 3.5s steps(40, end),
9 blink-caret .75s step-end infinite;
10}
11
12/* The typing effect */
13@keyframes typing {
14 from { width: 0 }
15 to { width: 100% }
16}
17
18/* The typewriter cursor effect */
19@keyframes blink-caret {
20 from, to { border-color: transparent }
21 50% { border-color: orange; }
22}
1--luau
2local strings = "this is a string"
3
4for i = 1, string.len(strings) do
5 print(string.sub(strings,1,i))
6 wait(0.2)
7end