10

Tenho a seguinte estrutura em HTML:

<font class="a">J</font>
<font class="b">o</font>
<font class="c">ã</font>
<font class="d">o</font>
<font class="e">P</font>
<font class="f">a</font>
<font class="g">u</font>
<font class="g">l</font>
<font class="i">o</font>
<font class="j">S</font>
<font class="l">a</font>
<font class="m">r</font>
<font class="n">a</font>
<font class="o">g</font>
<font class="p">o</font>
<font class="q">s</font>
<font class="r">s</font>
<font class="s">a</font>

E um JQuery que muda a cor de cada "font":

setInterval(function()
{
    var cores = 
    [
        "#ff00ff",
        "#ff00cc",
        "#ff0099",
        "#ff0066",
        "#ff0033",
        "#ff0000",
        "#ff3300",
        "#ff6600",
        "#ff9900",
        "#ffcc00",
        "#ffff00",
        "#ccff00",
        "#99ff00",
        "#66ff00",
        "#33ff00",
        "#00ff00",
        "#00ff33",
        "#00ff66"
    ]

    letras =
    [
        "a","b","c","d","e","f","g","h","i","j","l","m","n","o","p","q","r","s"
    ]

    for (var i = 0; i <= cores.length; i++) 
    {
        $("font[class ="+letras[i]+"]").css('color', cores[i]);
    }
},500);

Como posso criar um loop que altere a cor das letras num intervalo de tempo, de maneira que a cada intervalo cada letra receba a cor anterior a que havia recebido no loop anterior?

Código

4 Respostas 4

9

Não precisa usar <font>, que é obsoleta. Prefira usar tags <span>. Mas também nem precisa usar tantas classes e elementos, fica mais fácil se você estruturar dessa forma:

<div class="loop-de-cores">Seu texto aqui<div>

Você pode configurar o elemento usando atributos data:

<div class="loop-de-cores" data-tempo="300">Olá Mundo!<div>

Faça o jQuery criar os elementos por você e então anime-os. O exemplo abaixo já suporta configuração por meio dos atributos data, logo você pode ter mais de um loop na mesma página usando texto, cores e velocidades diferentes.

// Para cada loop que você tiver na página, executar essa função:
$('.loop-de-cores').each(function () {
  // Guarda o elemento em uma variável:
  var $this = $(this);

  // Guarda algumas configurações e seus valores padrão:
  // Você pode alterá-las usando "data-[nome da configuração]='valor da configuração'" no HTML:
  var tempo = $this.data('tempo') || 100;
  var cores = ($this.data('cores') || '#ff00ff,#ff00cc,#ff0099,#ff0066,#ff0033,' +
  '#ff0000,#ff3300,#ff6600,#ff9900,#ffcc00,#ffff00,#ccff00,#99ff00,#66ff00,' +
  '#33ff00,#00ff00,#00ff33,#00ff66').split(',');

  // Para melhorar a performance:
  var numeroCores = cores.length;

  // Cria os elementos:
  $this.html('<span>' + $this.text().split('').join('</span><span>') + '</span>');

  // Armazena-os em uma variável:
  var $span = $this.find('span');

  // Inicia o loop:
  setInterval(function () {
    // Rotaciona a array [ver nota]
    cores.unshift(cores.pop());

    // Aplica os estilos:
    $span.each(function (index) {
      // Usa a função `.css` para aplicar os estilos:
      $(this).css('color', cores[index%numeroCores]);
    });
  }, tempo);
});

Exemplo no JSBin

Nota: para melhor performance use uma dessas funções: https://stackoverflow.com/q/1985260/1850091

1
3

O que você precisa fazer é alterar a ordem do array de cores a cada rodada. O seu código deve ficar assim:

var deslocamento = 0;
setInterval(function()
{
    //Removi os vetores cores e letras para dar uma limpada no código mais eles ainda existem
    var coresUsaveis =[];
    for(var i = 0; i <  cores.length; i++){
      if(i+deslocamento < cores.length) coresUsaveis.push(cores[i+deslocamento]);
      else coresUsaveis.push(cores[i+deslocamento-cores.length]); //Caso seja maior que o tamanho de cores, volta do zero
        }
    if(++deslocamento == cores.length){ //Caso já tenha dado a "volta" no vetor
        deslocamento = 0;
    }
    for (var i = 0; i <= coresUsaveis.length; i++) 
    {
        $("font[class ="+letras[i]+"]").css('color', coresUsaveis[i]);
    }
},500);

Aqui o exemplo modificado completo.

3

Sem alterar o vetor, é possível criando uma variável auxiliar para informar a cor inicial do vetor onde cada loop vai iniciar. Essa variável é incrementada uma vez a cada execução do timer.

É necessário também fazer um controle do limite, pois iniciando a partir de uma posição inicial qualquer, devemos percorrer o array como se fosse uma lista circular.

Veja a implementação que fiz:

var cont = 0;
setInterval(function()
{
    var cores = 
    [
        "#ff00ff",
        "#ff00cc",
        "#ff0099",
        "#ff0066",
        "#ff0033",
        "#ff0000",
        "#ff3300",
        "#ff6600",
        "#ff9900",
        "#ffcc00",
        "#ffff00",
        "#ccff00",
        "#99ff00",
        "#66ff00",
        "#33ff00",
        "#00ff00",
        "#00ff33",
        "#00ff66"
    ]

    letras =
    [
        "a","b","c","d","e","f","g","h","i","j","l","m","n","o","p","q","r","s"
    ]
    var div = []
    for (var i = 0, di = cont; i < cores.length; i++, di--) 
    {
        if (di < 0) {
            di = cores.length - 1;
        }
        div.push(di)
        $("font[class ="+letras[i]+"]").css('color', cores[di]);
    }
    console.log(cont, div);
    cont++;
    if (cont >= cores.length) {
        cont = 0;
    }
},500);

Jsfiddle

0

tenta assim com as cores random

 setInterval(function()
    {
        var cores = 
        [
            "#ff00ff",
            "#ff00cc",
            "#ff0099",
            "#ff0066",
            "#ff0033",
            "#ff0000",
            "#ff3300",
            "#ff6600",
            "#ff9900",
            "#ffcc00",
            "#ffff00",
            "#ccff00",
            "#99ff00",
            "#66ff00",
            "#33ff00",
            "#00ff00",
            "#00ff33",
            "#00ff66"
        ]

        letras =
        [
            "a","b","c","d","e","f","g","h","i","j","l","m","n","o","p","q","r","s"
        ]

        for (var i = 0; i <= cores.length; i++) 
        {
            $("font[class ="+letras[i]+"]").css('color', cores[Math.floor(Math.random()*cores.length)]);
        }
    },500);

Exemplo: http://jsfiddle.net/UzUK2/

1
  • 1
    Ele não quer uma cor aleatória, mas uma a cor da letra posterior, na anterior. Commented 6/03/2014 às 14:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .