Я использую этот эффект карусели, который я получил от codepen для своего сайта, но мне нужна помощь, чтобы изменить его. Прямо сейчас все, что он делает, циклически перебирает список слов и печатает их.

Желаемый эффект, который я хотел бы получить, заключается в том, что цвет текста каждого набираемого слова отличается. Слова:

  • всезнайка .
  • просто.
  • чистый JS.
  • хорошенький.
  • веселье!

Будут все разные цвета, когда они будут напечатаны. Как я могу сделать это?

Пример Codepen

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);
};
html,
body {
  font-family: 'Raleway', sans-serif;
  padding: 1em 2em;
  font-size: 18px;
  background: #222;
  color: #aaa
}

h1,
h2 {
  font-weight: 200;
  margin: 0.4em 0;
}

h1 {
  font-size: 3.5em;
}

h2 {
  color: #888;
  font-size: 2em;
}
<link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
<h1>This pen is
  <span class="txt-rotate" data-period="2000" data-rotate='[ "nerdy.", "simple.", "pure JS.", "pretty.", "fun!" ]'></span>
</h1>
<h2>A single &lt;span&gt; is all you need.</h2>
4
Hugo Zhang 28 Авг 2017 в 07:22

3 ответа

Лучший ответ

Вы можете сделать это, определив массив цветов:

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

И устанавливая это каждый цикл:

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

Пример с пробками: https://codepen.io/mark_c/pen/WEavqy?editors=1010

2
mark_c 28 Авг 2017 в 04:43

Одним из возможных решений было бы добавить другой атрибут данных, такой как data-colors, а затем использовать их для поворота так же, как и для текста. Использование функции модуля позволит вам обернуть цвета, если цветов меньше, чем текста. Таким образом, у вас может быть 14 текстовых записей, но только два цвета, поэтому цвета будут чередоваться между двумя цветами.

Я настроил кодовую ручку с очень быстрой реализацией, которую вы могли бы использовать, но вот основы того, что я изменил:

HTML

<span
 class="txt-rotate"
 data-period="2000"
 data-rotate='[ "nerdy.", "simple.", "pure JS.", "pretty.", "fun!" ]'
 data-colors='[ "red", "blue", "green" ]'></span>

Javascript :

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');
    var colors = elements[i].getAttribute('data-colors');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), JSON.parse(colors), period);
    }
  }

... много неизменного кода ...

TxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];
  var thisColor = this.colors[this.loopNum % this.colors.length];

  ... other unchanged code ...

  this.el.innerHTML = '<span class="wrap" style="color:'+thisColor+'">'+this.txt+'</span>';

https://codepen.io/anon/pen/XaxbQL

0
Psyrus 28 Авг 2017 в 04:46

Вот обновленный 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;
};
var colors = ['red','blue','green'];    // Array of colours
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" style="color:'+colors[i]+'">'+this.txt+'</span>';    // Changing colours depending on word's index with colors.

  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
Himanshu Upadhyay 28 Авг 2017 в 04:49