How to change the color of a text, one letter at a time?-CodePudding

I want to make a text change the color of each letter individually, one at a time. For example: Hello World The "H" would be the first to become red, then "E", then "L", and so on.

I've tried making each letter a span and using jquery and a loop. But it doesn't work.

$("span").ready(function(){
var letters = $("span").length;
for (let i = 0; i <= letters; i  ){
  $("span")[i].css("color", "red");
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>, </span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>

CodePudding user response：

You're on the right track, but you will need to delay the change of the color for a certain moment (say 100ms) so that the effect can be seen. To have a delay, the method setTimeout is used that accepts 2 arguments:

A callback function that is called when the wanted delay has passed.
The wanted delay (100ms for example).

When picking a delay, say 100ms, we should multiply it with the index of the current letter (current span to be precise) so that the effect can be seen.

Here's a live demo:

/**
 * loop through the "span" elements.
 * delay a 100ms * i (current span index) that will later change the color for the span at index "i".
 * you may change the delay (100 in this case) by any value you want.
 */
$('span').each((i, el) => setTimeout(() => $(el).css('color', 'red'), i * 100))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>, </span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>

jQuery .each method is used to loop through the selected span elements

CodePudding user response：

You have to use eq() function because you can't use jquery function on a dom element, with eq you return a jquery element.

$("span").ready(function(){
var letters = $("span").length;
for (let i = 0; i <= letters; i  ){
  setTimeout(()=>{$("span").eq(i).css("color", "red")},i*1000);
 }
}
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>, </span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>

But the better solution is to use the each of jquery.

$("span").each((index,el)=>{
    setTimeout(()=>{$(el).css("color", "red")},index*1000);
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <span>H</span>
    <span>E</span>
    <span>L</span>
    <span>L</span>
    <span>O</span>
    <span>, </span>
    <span>W</span>
    <span>O</span>
    <span>R</span>
    <span>L</span>
    <span>D</span>

CodePudding user response：

let string = document.querySelector(".str");

const coloredWriter = (str, appendTo, speed) => {
  const body = document.querySelector(`${appendTo}`);
  const stringText = str.innerText;
  str.remove();
  const splitedText = stringText.split("");

  splitedText.forEach((element) => {
    let span = document.createElement("span");
    span.style.fontSize = '30px'
    span.innerText = element;
    span.classList.add("color");

    body.append(span);

    const allSpans = document.querySelectorAll(".color");
    let i = 0;
    let timeOut = () => {
      let randomColor = Math.floor(Math.random() * 16777215).toString(16);
      if (allSpans[i]) {
        setTimeout(() => {
          allSpans[i].style.color = `#${randomColor}`;
          i  ;
          timeOut();
        }, speed);
      }
    };
    timeOut();
  });
};

coloredWriter(string, "body", 500);

.str{
  fontsize:35px
}

<span >hello world</span>

CodePudding user response：

in jquery you have the function each that let you loop on all element of a selector

to "wait" between two color change, you can embed the css change in a setTimeoutlink to the index of the each loop

$(".letters span").each(function(index, elem) {
  setTimeout(function() {
    $(elem).css('color', 'red');
  }, index * 500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <span>H</span>
  <span>E</span>
  <span>L</span>
  <span>L</span>
  <span>O</span>
  <span>, </span>
  <span>W</span>
  <span>O</span>
  <span>R</span>
  <span>L</span>
  <span>D</span>
</div>