CODEWITHSUNDEEP
javascripthtmljquerycss
Eduardo Gonçalves Junior
Eduardo Gonçalves Junior

Reputation: 3

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

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>

Upvotes: 0

Views: 564

Answers (4)

Nick
Nick

Reputation: 1629

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>

Upvotes: 1

jeremy-denis
jeremy-denis

Reputation: 6878

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 class="letters">
  <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>

Upvotes: 1

Garo Gabrielyan
Garo Gabrielyan

Reputation: 673

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 class="str">hello world</span>

Upvotes: 1

ThS
ThS

Reputation: 4773

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:

  1. A callback function that is called when the wanted delay has passed.
  2. 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

Upvotes: 1

Related Questions