I have used the codepen example by Aakhya Singh (https://codepen.io/daviddcarr/pen/XVyQMM), to create a looping typewriter text. The example was used as a base and I modified it to my specifications:
HTML
<div class="container py-5">
<div class="output text-center" id="output">
<h2 class="cursor", style="font-weight:bold; text-align:center;"></h2>
<hr>
</div>
</div>
CSS
.output {
text-align:left;
color:black;
}
/* Cursor Styling */
.cursor::before {
content:'>';
}
.cursor::after {
content:'';
display:inline-block;
margin-left:3px;
background-color:#05AC72;
animation-name:blink;
animation-duration:0.5s;
animation-iteration-count: infinite;
}
h2.cursor::after {
height:28px;
width:7px;
}
p.cursor::after {
height:13px;
width:6px;
}
@keyframes blink {
0% {
opacity:1;
}
49% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:0;
}
}
JS
// values to keep track of the number of letters typed, which quote to use. etc. Don't change these values.
var i = 0,
a = 0,
isBackspacing = false,
isParagraph = false;
// Typerwrite text content. Use a pipe to indicate the start of the second line "|".
var textArray = ["text to appear in typewriter"];
// Speed (in milliseconds) of typing.
var speedForward = 100, //Typing Speed
speedWait = 1000, // Wait between typing and backspacing
speedBetweenLines = 1000, //Wait between first and second lines
speedBackspace = 25; //Backspace Speed
//Run the loop
typeWriter("output", textArray);
function typeWriter(id, ar) {
var element = $("#" + id),
aString = ar[a],
eHeader = element.children("h2"), //Header element
eParagraph = element.children("p"); //Subheader element
// Determine if animation should be typing or backspacing
if (!isBackspacing) {
// If full string hasn't yet been typed out, continue typing
if (i < aString.length) {
// If character about to be typed is a pipe, switch to second line and continue.
if (aString.charAt(i) == "|") {
isParagraph = true;
eHeader.removeClass("cursor");
eParagraph.addClass("cursor");
i++;
setTimeout(function(){ typeWriter(id, ar); }, speedBetweenLines);
// If character isn't a pipe, continue typing.
} else {
// Type header or subheader depending on whether pipe has been detected
if (!isParagraph) {
eHeader.text(eHeader.text() + aString.charAt(i));
} else {
eParagraph.text(eParagraph.text() + aString.charAt(i));
}
i++;
setTimeout(function(){ typeWriter(id, ar); }, speedForward);
}
// If full string has been typed, switch to backspace mode.
} else if (i == aString.length) {
isBackspacing = true;
setTimeout(function(){ typeWriter(id, ar); }, speedWait);
}
// If backspacing is enabled
} else {
// If either the header or the paragraph still has text, continue backspacing
if (eHeader.text().length > 0 || eParagraph.text().length > 0) {
// If paragraph still has text, continue erasing, otherwise switch to the header.
if (eParagraph.text().length > 0) {
eParagraph.text(eParagraph.text().substring(0, eParagraph.text().length - 1));
} else if (eHeader.text().length > 0) {
eParagraph.removeClass("cursor");
eHeader.addClass("cursor");
eHeader.text(eHeader.text().substring(0, eHeader.text().length - 1));
}
setTimeout(function(){ typeWriter(id, ar); }, speedBackspace);
// If neither head or paragraph still has text, switch to next quote in array and start typing.
} else {
isBackspacing = false;
i = 0;
isParagraph = false;
a = (a + 1) % ar.length; //Moves to next position in array, always looping back to 0
setTimeout(function(){ typeWriter(id, ar); }, 50);
}
}
}
Right now the animation starts like this:
With the cursor in the center.
The typewriter effect will type all the text and the text gets re-centered depending on the number characters appearing:
the final text will appear like this:
Is it possible to have the typewriter text centered in the screen be left aligned so that the text will appear in the same position? Right now, the text moves in order to get re-centered when additional characters are added/deleted. By this, I would like the cursor to appear left-aligned in the center of the page like this at the start:
and the text that follows will appear from this point and continue looping:
I have tried experimenting with style="text-align:center;" and style="text-align:left;" and changing the margin but I was not successful. I used margin to get the text somewhat entered, however the result looked different depending on the browser used and the resolution of the display.
I also tried reading the post here:
CSS: Center block, but align contents to the left
however I could not solve this issue.
