Typing effect with changing text in slideshow title - Debut Theme

Store Design
1

Hello everyone,

I am currently working on my website (Debut Theme) and wanted to add a typing effect with changing text carousel to my slideshow title.

I found this code that is exactly what I want to do: https://codepen.io/CheeseTurtle/pen/jzdgI

The thing is I don’t know exactly where to put the JS code, I tried adding it to the theme.js at the end:

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

And then replacing this part in the **slideshow.liquid**:

```markup
## 
                            {{ block.settings.slide_title | escape }}

with this :

# This pen is

But only the first part of the title appears, not the changing text…

Any ideas how to fix that?

Sorry I am really new in coding so I don’t even know exactly where to put the JS code…

Thanks!!!

1 Like
2

Ok, it seems to actually work now…

Sorry, hope this can help other readers cause I didn’t find any post on this topic with JS!

Cheers

3

If anyone knows how to make it editable in the section customizer instead?

Cause now I need to change the title directly in the slideshow.liquid code, would be good to do it via the editor!

4

Hi. I created the same typewriter carousel effect in Debut. However, I’m encountering a different 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. I’ve pasted my code into the bottom of this message and would really appreciate any ideas you might have. :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);
};

5

Does this still work for you? I input the code and the typing text effect is not working. Thanks for your help!

6

It did work for me in the end. But I ended up deleting that store. Here are the last notes I have to share on the carousel typing effect. Not sure if they are updated to reflect how I fixed it or not as it’s been a while since I last thought about it… Cheers!

https://codepen.io/CheeseTurtle/pen/jzdgI?cf_chl_jschl_tk=64c9371b4bf5dce6a2d52f4e893b80d9e750d3f4-1607120939-0-AVs4ywjVNyVo6ZH8zZAYApnYQvxohUjFVvP8V8AiRkJulcR3FAWFG99Wambpoj525CN_fiXYXUf_r12wxVRiyb-aQoCIstbUHB86VAD_XueHDwW_7BuqNsvq_6u3FkqRQBqbRTh8Uq8Kx6TEpak1SCtA8PKMCVNZNEaNaO5iYPMF1FcvGIH23BE4OTDGyhPLUJbJyQYA8SHIFbGw6elf3oZ2A29k1kvxFxWgFbeLMO9TSnF4jmbwp1VYmsWr-SRg8fkrcaj0sO4cNaKqIMHhfZw-XohXW88eiz6ldIozp_VD963kR7VjA_FcCP0zzreTu1QtiVqglaNq6McJVoivuACCAZRqZ2P7bNwGKRbehvZwaS1zqiSStT4llpBE6CNDDO211Qbnm0guZ_O5OMx3BPg

HTML - pasted into line 93 of hero.liquid:

.image-exception { color: #A64141; font-weight: bold; font-family: 'Lora-Regular', sans-serif; display: inline; background-color: #FFFFFF; padding: 4px; } .image-exception-2 { color: #A64141; font-weight: bold; font-family: 'Lora-Regular', sans-serif; display: inline; background-color: #FFFFFF; padding: 4px; }

We Deliver



From Local Producers 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);
};

1 Like