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

Html – changing color of multiple logos every second

i want to make logos to change color every second with this transition

i{
  color: blue; 
  transition: color .5s;
}

i want to logos in i class to smoothly change color from white to red in loop

this 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>

i found code to change background color and remade it to change color of logos but it only change 1 logo, and i dont know how to make that it change all 5 logos

(this is the code that i remade)

    <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>
Tags:

2

Answers


  1. 0

    You are using document.querySelector which returns the first element that it finds a match to. Instead you need to use document.querySelectorAll which returns a list of ALL matching elements.

    Do this to loop over your element matches. Note that I moved the selector to be OUTSIDE of the setInterval since there’s no need to keep selecting the same elements every iteration. Just select them once, save to a variable, and then modify on each iteration

    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);
    Login or Signup to reply.
  2. 0

    Put in this code in your script tag to change the colours of the logos in an interval:

    var allLogos = document.querySelectorAll('i')    
    var currentLogoIndex = 0
    const interval = setInterval(function () {
        
        const colourLogo = (index, color) => {
            allLogos[index].style.color = color
        }

        // First Logo
        if(currentLogoIndex===0){
            colourLogo(allLogos.length - 1, "blue")
            colourLogo(currentLogoIndex, "red")
        }

        // Middle Logos
        else if(currentLogoIndex>0 && currentLogoIndex < allLogos.length - 1){
            colourLogo(currentLogoIndex, "red")
            colourLogo(currentLogoIndex - 1, "blue")
        }
        
        // Last logo
        else{
            colourLogo(currentLogoIndex, "red")
            colourLogo(currentLogoIndex - 1, "blue")
            currentLogoIndex = -1
        }
        currentLogoIndex++

        
    }, 1000);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search