Typewriter Carousel Animation - Debut Theme

Solved
Excursionist
18 2 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!   

HTML - pasted into line 93 of hero.liquid:
 
          <link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />                                                                        
        <style>
          .image-exception {
              color: #A64141;
              font-weight: bold;                          
            font-family: 'Lora-Regular', sans-serif;   
          }
            
          </style>
          <h1 class="image-exception">We Deliver
                <span                                  
                   font-size: 4em;
                   class="txt-rotate"
                   data-period="2000"
                   data-rotate='[ "Groceries!", "Convenience!", "Time & Money Savings!", "Goodness!", "Local Products!" ]'>
                </span>
                </h1>
          <h2 class="image-exception">Local Natural Products Delivered To Your Doorstep!         
          <span
                  font-size: 3em;>
            </span>
          </h2>
       
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 = '<span class="wrap">'+this.txt+'</span>';
 
  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);
};
 
0 Likes
Excursionist
18 2 1

This is an accepted solution.

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

0 Likes