У меня проблема с получением анимации, имеющей заданный 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
});
Любая помощь по этому вопросу будет принята.