Typewriter Carousel Animation - Debut Theme

Technical Q&A
1

Hi. I created a typewriter carousel effect in Debut. However, I’m encountering a problem. When I go into the theme customize area and delete the default wording from the header and paragraph of the ‘image with text overlay’ that holds my carousel, all the words from my carousel effect also are deleted.

My site is https://islandnatural.delivery/. You can see the first image has the default text in blue appearing around my carousel text in red. In the second image, you can see only the button remains as I had deleted the default wording. I’ve pasted my code into the bottom of this message and would really appreciate any ideas you might have on how to delete the default text without deleting my carousel text! :slightly_smiling_face: :slightly_smiling_face:

HTML - pasted into line 93 of hero.liquid:

.image-exception { color: #A64141; font-weight: bold; font-family: 'Lora-Regular', sans-serif; }

We Deliver

Local Natural Products Delivered To Your Doorstep!

JS - pasted at bottom:

var TxtRotate = 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;
};

TxtRotate.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 = 300 - 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(‘txt-rotate’);
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute(‘data-rotate’);
var period = elements[i].getAttribute(‘data-period’);
if (toRotate) {
new TxtRotate(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement(“style”);
css.type = “text/css”;
css.innerHTML = “.txt-rotate > .wrap { border-right: 0.08em solid #666 }”;
document.body.appendChild(css);
};

2

I was able to fix the problem but not delete the post. lol