<!-- CSS Code -->
<style type="text/css" scoped="">
#container {
text-align: left;
}
#text {
display: inline-block;
vertical-align: center !important;
color: rgba(0,0,0,1);
line-height: 1.5;
letter-spacing: 0em;
font-size: 55px;
text-align: left;
font-family: 'Newsreader Display Light';
font-weight: 400;
font-style: normal;
}
#cursor {
display: inline-block;
vertical-align: left !important;
width: 0px;
height: 50px;
background-color: #fff;
animation: blink .75s step-end infinite;
}
</style>
<!-- HTML Code -->
<div id="container">
<div id="text"></div><div id="cursor"></div>
</div>
For this code to work, you must not only copy the embed box above, but also the code that's in the "Page loaded Javascript" area of this page. (Located when you click Page, then scroll to the bottom for "advanced settings."
Copy it into your desired page from the text below, then feel free to swap out the sentences / words you prefer.
Then, either copy and paste the embed box above onto that page, or you can copy the below code at left into a new embed box,
If you'd like to change the font of the typewriter, simply swap the font of your choice where it says 'Newsreader-Display Light' and the size and color.
// List of sentences
var _CONTENT = [
"Content Creators",
"Interior Designers",
"Lifestyle Bloggers",
"Marketing Agencies",
"TikTok Influencers",
];
// Current sentence being processed
var _PART = 0;
// Character number of the current sentence being processed
var _PART_INDEX = 0;
// Holds the handle returned from setInterval
var _INTERVAL_VAL;
// Element that holds the text
var _ELEMENT = document.querySelector("#text");
// Cursor element
var _CURSOR = document.querySelector("#cursor");
// Implements typing effect
function Type() {
// Get substring with 1 character added
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_PART_INDEX++;
// If full sentence has been displayed then start to delete the sentence after some time
if(text === _CONTENT[_PART]) {
// Hide the cursor
_CURSOR.style.display = 'none';
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 50);
}, 1000);
}
}
// Implements deleting effect
function Delete() {
// Get substring with 1 characater deleted
var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
_ELEMENT.innerHTML = text;
_PART_INDEX--;
// If sentence has been deleted then start to display the next sentence
if(text === '') {
clearInterval(_INTERVAL_VAL);
// If current sentence was last then display the first one, else move to the next
if(_PART == (_CONTENT.length - 1))
_PART = 0;
else
_PART++;
_PART_INDEX = 0;
// Start to display the next sentence after some time
setTimeout(function() {
_CURSOR.style.display = 'inline-block';
_INTERVAL_VAL = setInterval(Type, 100);
}, 200);
}
}
// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);