Hugo Zhang Hugo Zhang - 2 months ago 22
jQuery Question

CSS Changing color of text after it is typed out again effect? Codepen attached

I'm using this typing carousel effect I got from codepen for my website, however, I need help modifying it. Right now, all it does it cycle through a list of words and types them out.

The desired effect I would like is that the text color of each separate word that is typed out is different. So for example in the codepen, the words "nerdy.", "simple.", "pure JS.", "pretty.", and "fun!" would all be different colors when they are typed out. How can I accomplish this?

Codepen Example

Javascript:

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

Answer Source

You can do this by defining an array of colours:

var colours = ["red", "green", "blue", "yellow", "orange"]

and setting it each loop:

this.el.innerHTML = '<span class="wrap" style="color: ' + colours[i] + '">'+this.txt+'</span>';

Forked example: https://codepen.io/mark_c/pen/WEavqy?editors=1010