How to make my letters change colors periodically?-CodePudding

Im trying to make the inner html of a div to change colors. My div looks like this

<div class = 'child'>     
    <span >F</span>
    <span >u</span>
    <span >n</span>
    <span >n</span>
    <span >y</span>
    <span > </span>
    <span >k</span>
    <span >l</span>
    <span >o</span>
    <span >k</span> 
</div>

and my javascript looks like this

var value = document.getElementsByClassName("child")[0].innerHTML;

bannerArray = value.split("");

var colourArray = [
  "rgb(248, 116, 138)",
  "rgb(248, 125, 145)",
  "rgb(248, 140, 160)",
  "rgb(248, 160, 180)",
  "rgb(248, 175, 195)",
  "pink",
  "rgb(248, 195, 215)",
  "rgb(248, 205, 235)",
  "rgb(248, 225, 225)",
];


for  ( let i = 0; i < colourArray.length; i  ) {
  
  for ( let j  = 0; j < bannerArray.length; j  ) {
    document.getElementsByClassName("color")[j].style.color = colourArray[i];
  }
}

the result of that code is basically every letter in the banner array gets the first color from the color array, then the second color, until i end up with all the letters being the last color ie rgb(248, 225, 225). What id like is the first color to pass through the first letter, then move to the second letter, then have the first letter take the second color in the color array, then the second color to move to the second letter, then the first letter to take the third color in the array and so on and so forth like marque for lack of a better description, So very sorry for the wall of text.

CodePudding user response：

You can do something like this: https://codesandbox.io/s/starting-template-forked-hg9oso?file=/src/App.tsx

by using the hsl colors, you can easily run through color wheel and set the different hue for every letter :) I hope it helps :)

p.s. you can use whatever you want instead of counter for changing the color position...

CodePudding user response：

Use setTimeout

Get all the children (spans) of div with the class child into an array

I suggest using id instead. If there is another div with the same class child above this div. The first div ends up getting the styles.

const children = document.querySelector(".child").children;

Define a function to apply color to the characters

function applyColors(children, colorArr) {
   for (let i = 0; i < children.length; i  ) {
      children[i].style.color = colorArr[i];
   }
}

Write a function to rotate your colors array. Source

function arrayRotate(arr, reverse) {
  if (reverse) arr.unshift(arr.pop());
  else arr.push(arr.shift());
  return arr;
}

Clone your colors array as a best practice. ( As you keep changing this array in the next step )

const changingColorsArray = [...colourArray];

Change the color of characters every 1s (1000ms) and apply the same to your characters.

Call the function for one time outside setInterval to apply colors on page load.

// apply colors on page load
applyColors(children, changingColorsArray);

setInterval(() => {
  // change colors
  arrayRotate(changingColorsArray, true);

  // apply colors
  applyColors(children, changingColorsArray);
}, 1000);

Note: You need to add one more color to your colourArray as there are 10 characters including in the middle

PS: use const or let over var

Check here for a working demo