Using only HTML and CSS, show a typewriter effect on multiple lines with intermittent pause at specified locations to make the typing look realistic:
The output result I'm looking for is the following:
Line One:
"INSERT TEXT"
-pause typewriter effect for two seconds-
continue on Line One: "INSERT TEXT 2"
Line Two - two seconds after Line One has finished typing:
"INSERT TEXT 3"
Line Three - two seconds after Line Two has finished typing:
"INSERT TEXT 4"
When amount of pause seconds and specified location of pauses are adjusted, it will make the typewriter effect look as if someone is thinking of what to write next.
The following two codes have given some results close to what I'm looking for, if only I could make the correct changes to achieve the full desired effect:
https://codepen.io/weihungchin/pen/XPZJwq (Intermittent pausing but no line breaks - also placement of elements is not as shown)
https://codepen.io/Bojoer/pen/EZYgeO (Multiple lines but no intermittent pausing at specified locations)
I am completely clueless when it comes to coding and wondered if anyone can provide what I think would make the most complete realistic typewriter effect. Thank you very much.
The output result I'm looking for is the following:
Line One:
"INSERT TEXT"
-pause typewriter effect for two seconds-
continue on Line One: "INSERT TEXT 2"
Line Two - two seconds after Line One has finished typing:
"INSERT TEXT 3"
Line Three - two seconds after Line Two has finished typing:
"INSERT TEXT 4"
When amount of pause seconds and specified location of pauses are adjusted, it will make the typewriter effect look as if someone is thinking of what to write next.
The following two codes have given some results close to what I'm looking for, if only I could make the correct changes to achieve the full desired effect:
https://codepen.io/weihungchin/pen/XPZJwq (Intermittent pausing but no line breaks - also placement of elements is not as shown)
https://codepen.io/Bojoer/pen/EZYgeO (Multiple lines but no intermittent pausing at specified locations)
I am completely clueless when it comes to coding and wondered if anyone can provide what I think would make the most complete realistic typewriter effect. Thank you very much.
