Javascripted texts

Place this in a HTML module

This is to create.

<h3>
This is
<a href="" class="typewrite" data-period="4000" data-type=' [
"easy",
"quick",
"simple"
]'>
</a>
to create.

</h3>

<div>
<h3>
<a href="" class="typewrite" data-period="2000" data-type='[

"The text is in a HTML module.",
"But it works using Javascript.",
"It is under Page Builder > Tools.",
"Layout CSS/Javascript."

]'>
</a>
</h3>
</div>

CSS

/* centre-me class selector is added to
the HTML module under the advanced tab */

.centre-me
{
display: flex;
align-items: center;
justify-content: center;
}

/* This adds the blinking cursor
Remove the animation and keyframes to remove the blinking
or remove everything to remove the cursor*/

.typewrite {
border-right: 2px solid;
animation: caret 1s steps(1) infinite;
}

@keyframes caret {
50% {
border-color: transparent;
}
}

/* I added this to overwite the blinking in row 2*/

.no-cursor .typewrite {
border-right: none;
animation:none;
}

/* Just to add a 2nd colour in the header of row 1*/

.fl-builder-content .animated-text-row1 H1 {

letter-spacing: -.4px!important;
}

.fl-builder-content .animated-text-row1 H1 STRONG
{
color: #A5E6AE !important;
}

.single-line .typewrite
{
color: #A5E6AE !important;
font-family: georgia serif;
font-size: 26px;
}

/* used in row 2 to add the glow (blur)*/
.one-word .typewrite
{
font-weight: bold;
font-style: normal;
text-shadow: 0 0 30px #FFFFFF;
}

/* used in row 3- it makes the cursor (border right) bigger too*/
.end-word .typewrite
{
background-color: #E00A0A;
display: inline-block;
color: #FFFFFF;
font-weight: bold;
border-right: 10px solid #BF0505;
padding: 0 10px;
}

Javascript

var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};

TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];

if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}

this.el.innerHTML = ''+this.txt+'';

var that = this;
var delta = 150 - Math.random() * 100;

if (this.isDeleting) { delta /= 2; }

if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}

setTimeout(function() {
that.tick();
}, delta);
};

window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}

};