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); } } };