Six Typewriter delete and type

Ask the community
,
1

Hi, I would like to make a typewriter effect on my Wix with type and backspace and type another text.

I copy this from another side, only able to type once. I want it can change words. Is it able to do it in the wix?

This is my code:

import wixData from ‘wix-data’;
let interval;
let timeInterval = 120;
let typeStr = “interactive”;
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);
});

I found this on another page, but doesn’t work on my wix.

< type >
< span >this text will be deleted</ span >
</ type >
< wait >500ms</ wait >
< delete data-chars=“21” data-ignore-whitespace=“true”></ delete >
< wait >500ms</ wait >
< type >
told you :stuck_out_tongue:
</ type >

2

You can’t embed HTML in a Corvid page. Corvid understands all of Javascript, except for anything that accesses the DOM.

The Typewriter example might be helpful for your needs.

3

this typewriter is good to me, but I need something that will backspace and type in another word, like this :

4

im a beginner here.

var typed3 = new Typed(‘#typed3’, {
strings: [‘My strings are: strings with’, ‘My strings are: HTML’, ‘My strings are: Chars × ©’],
typeSpeed: 0,
backSpeed: 0,
smartBackspace: true, // this is a default
loop: true });

but when I paste this, shown. Typed not defined.

5

We appreciate your interest in really getting the most out of Corvid and how much you want to learn. Please understand that if you are going to work with code extensively in the product and not just the features in the user interface, you will need to familiarize yourself with basic coding concepts to accomplish what you want. There are a wealth of Javascript coding sites which will help you learn Javascript from basic to advanced - Javascript.info is a good one. The Corvid Resources page provides tutorials, examples , and articles on getting the most out of Corvid. We are happy to get you pointed in the right direction, but you’ll need to take it from there. As questions or difficulties arise, we are here to help.

You may also want to check out the WixArena - it’s a hub where you can look for Corvid (and other) experts for hire.