Question 278536 in Html Question posted in
Some basic documentation can be found here.

Html – changing logos color

i want to make that first logo will turn red after a 1 second, second logo will turn red, and first logo will turn white, and do this until fifth logo, and do it in loop, here is code that i have for turning red all logos at the same time

const colors = ['white', 'red'];
let active = 0;
const iconElements = document.querySelectorAll('i');

setInterval(function(){
  iconElements.forEach(el => el.style.color = colors[active]);
  active++;
  if (active == colors.length) active = 0;
}, 1500);

and here is part of code of my website

    <div class="flex items-center justify-center h-screen">
      <div id="aboutMe" class="text-center">
        <h1 class="text-4xl bg-blend-color border-l-green-500 font-thin text-white">igorekowo >_<</h1>
        <h1 id="typedText" class="text-lg drop-shadow-xl font-thin text-white">owo
        </h1>
        <a href="https://open.spotify.com/artist/..." target="_blank">
          <i class="fa-brands fa-spotify pt-4 text-3xl text-white/50 font-extralight cursor-pointer" style="font-size:36px; text-shadow: 0 0 0.10em rgb(255, 255, 255);"></i>
        </a>
        <a href="https://discordapp.com/users/..." target="_blank">
          <i class="fa-brands fa-discord pt-4 text-3xl text-white/50 font-extralight cursor-pointer" style="font-size:36px; text-shadow: 0 0 0.10em rgb(255, 255, 255);"></i>
        </a>
        <a href="https://youtube.com/..." target="_blank">
          <i class="fa-brands fa-youtube pt-4 text-3xl text-white/50 font-extralight cursor-pointer" style="font-size:36px; text-shadow: 0 0 0.10em rgb(255, 255, 255);"></i>
        </a>
        <a href="https://www.tiktok.com/..." target="_blank">
          <i class="fa-brands fa-tiktok pt-4 text-3xl text-white/50 font-extralight cursor-pointer" style="font-size:36px; text-shadow: 0 0 0.10em rgb(255, 255, 255);"></i>
        </a>
        <a href="https://instagram.com/..." target="_blank">
          <i class="fa-brands fa-instagram pt-4 text-3xl text-white/50 font-extralight cursor-pointer" style="font-size:36px; text-shadow: 0 0 0.10em rgb(255, 255, 255);"></i>
        </a>
      </div>  
    </div>
    <script src="js/main.js"></script>
    <script>
      type(["(*≧ω≦*)", "i luv igorekowo :3", "meow ^_^"], typewriterElement,textIndex,charIndex,isDeleting, isLineVisible);
      updateTitle("kys.mom <3 ");
    </script>
    <script>
var colors = ['white', 'red'];
var active = 0;
setInterval(function(){
    document.querySelector('i').style.color = colors[active];
    active++;
    if (active == colors.length) active = 0;
}, 1500);
    </script>
  </body>
</html>
Tags:

2

Answers


  1. 0

    enter image description here

    Do you mean this?

    setInterval(function () {
  iconElements.forEach((el, index) => {
    el.style.color =
      colors[((active + iconElements.length - index) % iconElements.length == 0) % 2];
  });
  active++;
}, 1000);

    I hope my answer can help you.

    Good luck.

    Login or Signup to reply.
  2. 0

    I believe this is what you’re looking for (an alternating colour change, I put in Blue instead of white because it’s more visible, but you can change the colour as needed):

    <script>
    var allLogos = document.querySelectorAll('i')    
    var currentLogoIndex = 0
    const interval = setInterval(function () {
        // if last logo, stop and reset to blue
        if(currentLogoIndex==allLogos.length){            
            allLogos[currentLogoIndex - 1].style.color = "blue"
          //clearInterval(interval)
           currentLogoIndex=0
          return  
        } 
        // set current logo to red
        allLogos[currentLogoIndex].style.color = "red"
        // set previous logo to white (if it exists)
        if(currentLogoIndex>0) allLogos[currentLogoIndex - 1].style.color = "blue"
        // increment index
        currentLogoIndex++
        
    }, 1000); </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search