Hello! I used the code from this site: https://www.grampsworkbench.com/Examples/Typewriter to create a typewriter effect. I am still pretty beginner level when it comes to coding. The code I used for my site is as follows:
// For full API documentation, including code examples, visit http://wix.to/94BuAAs import wixData from 'wix-data'; let interval; let timeInterval = 100; let typeStr = "Website Designer"; let typeIdx; let htmlStr = ''; let displayStr; $w.onReady(function () { // Get the original html string, and split it into two pieces. // In the process, remove the separator !##! // By saving the original html, we preserve the style of the text to display. if (htmlStr.length === 0) { // just get the original html text the first time htmlStr = $w("#typewriterPage").html; } $w("#typewriterPage").html = ''; // don't show the original text let strPieces = htmlStr.split("!##!"); displayStr = ''; // init string that we will "type" to typeIdx = 0; // start at beginning of string we want to "type" // Declare an interval function that will run in the background. // This function will be triggered by the defined timeInterval. interval = setInterval(function () { // Get next char from string to be typed and concatenate to the display string. displayStr = displayStr + typeStr[typeIdx++]; // Make a sandwich with the display string in between the original html pieces. $w("#typewriterPage").html = strPieces[0] + displayStr + strPieces[1]; // Stop the interval from running when we get to the last character to by "typed". if (typeIdx === typeStr.length) clearInterval(interval); }, timeInterval); }); // For full API documentation, including code examples, visit http://wix.to/94BuAAs I would like to add more text, but I would like it to be below. Example:
Web Designer
SEO Analyst
How can I add a line break to this code? I attempted to add <br>, but it broke the code. I would like all the text to be in one textbox. Any suggestions?
I streamlined a little bit the code and here it is, just put \n inside the string to make it break a line.
Try it:
let interval let timeInterval = 100 let typeStr = "Website Designer \n SEO Analyst" let typeIdx = 0 let displayStr = "" let endingString = "|" $w.onReady(() => { $w("#typewriterPage").text = "" interval = setInterval(() => { displayStr = displayStr + typeStr[typeIdx] typeIdx++ $w("#typewriterPage").text = displayStr + endingString typeIdx === typeStr.length && clearInterval(interval) }, timeInterval) })