Adjustments
Change this in the HTML module to change speed
class="typewrite" data-period="4000"
For other adjustments see notes under
Page Builder > Tools > Layout CSS/Javascript > CSS
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;
}
JS
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 = '<span class="wrap">'+this.txt+'</span>';
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);
}
}
};
...and a few affiliate links (well you never know)
