color the text, word by word, without click or hover Coloring according to certain speed, can be define and change

amoon 0
Viewed 31

how make : color the text, word by word, without click or hover Coloring according to certain speed, can be define and change,

write a function to color a text, word by word. We will provide one ful sentence, and your function will be called to color word by word, without mouse click or hover on the word

in Html css or javaScripts

https://youtu.be/nsyiw6o7gtE like this video

javascript css html
3 Answers

You need to set all words inside div to span tag separately and to recursively call function until it is done. You can change speed to any number and it is in milisecond. The first word is instant changed to some color, but you can delay it too if you want.

const words = Array.from(document.querySelectorAll(".word"));
const speed = 1000;
let counter = 0;

const setColor = () => {
  words[counter].style.color = "red";

  words.map((word, index) => {
    if (index !== counter) {
      word.style.color = "initial";
    }
  });

  setTimeout(() => {
    if (counter < words.length) {
      setColor();
    } else {
      word.style.color = "initial";
    }

    counter++;
  }, speed);
};

setColor();
<h1><span class="word">Lorem</span> <span class="word">ipsum</span> <span class="word">dolor</span> <span class="word">sit</span> <span class="word"> amet</span>.</h1>

Nemanja29120

If you want some more specific way without javascript. You can always use SCSS loop. But for this, you will set a number of this word manual. So it will be faster without script, but it is less automatic.

@for $i from 1 through 15 {
  h1 > span:nth-child(3n + #{$i}) {
    animation-name: changeColor;
    animation-duration: 1s;
    animation-delay: $i * 1s;
    animation-timing-function: linear;
  }
}

@keyframes changeColor{
  from{
    color: red;
  }
  to{
    color: red;
  }
}
Nemanja29120

You need to create each word in a separated span.

After that in JS you can put a CSS class on the next span (the CSS class give the color to the element)

Finally using a setInterval allows you to call the function at specified intervals.

const wordContainer = document.getElementById("words-container")
const words = ["Lorem", "ipsum", "dolor", "sit", "amet"] // Define all your words here

// Create all the words
const wordElements = words.map((word, i) => {
  const span = document.createElement("span"); // Create new span element
  span.classList.add("word"); // Add class
  span.innerHTML = word + " "; // Add content inside the span

  // Insert the new span inside the main div
  wordContainer.appendChild(span);

  return span
})


// Changing the color of words
const delay = 1 // Time to wait before changing the color (in seconds)
let idToColor = 0;
const maxId = wordElements.length - 1;

function colorElement() {
  wordElements[idToColor].classList.add("colored") // Adding class to current element
  if (idToColor !== 0) {
    // Remove the class to the previous word
    wordElements[idToColor - 1].classList.remove("colored")
  } else {
    // Remove to the class to the last word
    wordElements[maxId].classList.remove("colored")
  }

  idToColor = idToColor !== maxId ? idToColor + 1 : 0 // Increment the id to color
}

setInterval(colorElement, delay * 1000)
.word.colored {
  color: #02b875;
}
<h1 id="words-container">
</h1>

user1P2510
Related