Анимация текста, добавление цвета к слову spefi c в javascript / css - PullRequest
0 голосов
/ 29 февраля 2020

У меня проблема с получением анимации, имеющей заданный c цвет текста для конкретного слова.
Анимационный текст работает нормально для анимации, но мне нужно, чтобы второе слово было в другой цвет (в настоящее время слова являются креативным мышлением, мне нужно другое мышление).

Я использую CSS и JavaScript для достижения желаемого эффекта анимации на основе перемещения букв. https://tobiasahlin.com/moving-letters/#6

В настоящее время я в растерянности относительно того, как этого добиться, в настоящее время я пытался изменить скрипт, и я не уверен, как еще go о добавлении цвет ко второму слову.

Вот код:

.ml6 {
  position: relative;
  font-weight: 900; 
  font-size: 3.3em;
}

.ml6 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em; 
  padding-right: 0.05em; 
  padding-bottom: 0.1em;
  overflow: hidden;
}

.ml6 .letter {
  display: inline-block;
  line-height: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
.add({
  targets: '.ml6 .letter',
  translateY: ["1.1em", 0],
  translateZ: 0,
  duration: 750,
  delay: (el, i) => 50 * i
})
.add({
  targets: '.ml6',
  opacity: 0,
  duration: 1000,
  easing: "easeOutExpo",
  delay: 1000
});

Любая помощь по этому вопросу будет принята.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...