Efeito Infinto

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Efeito Infinto

Mensagem por iScroll 17.09.17 4:41

Detalhes da questão


Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: PunBB

Descrição


Código:
(function ($) {
  'use strict';
 
  $(function () {
    $('img[alt="Novas mensagens"]')
      .closest('td')
        .find('.topic-ball')
          .children('i')
            .css({
              'box-shadow': '0px -40px 0px #2ea3f2 inset',
              'border-radius': '100px',
              'color': '#fff'
            })
    ;
  });
 
}(jQuery));

Gostaria de ter esse efeito: http://prntscr.com/gm3lg4 que já está no meu fórum, mas quero ele infinitamente, exemplo, como se estivesse com e sem o mouse em um prazo de 0.5s.
Seria possível?
Fórum para vocês testarem: http://prntscr.com/gm3mdl
Desde já agradeço
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Infinto

Mensagem por Luiz 17.09.17 14:14

Adicione à sua CSS:
Código:
@-webkit-keyframes fa_rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes fa_rotate {
  from {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
        transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
        transform: rotate(360deg);
  }
}
Não esqueça de desativar a opção de melhorar o CSS.

E mude o JavaScript por:
Código:
(function ($) {
  'use strict';
 
  $(function () {
    $('img[alt="Novas mensagens"]')
      .closest('td')
        .find('.topic-ball')
          .children('i')
            .css({
              'box-shadow': '0px -40px 0px #2ea3f2 inset',
              'border-radius': '100px',
              'animation': 'fa_rotate .7s linear infinite',
              'color': '#fff'
            })
    ;
  });
 
}(jQuery));

o/
Luiz

Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Infinto

Mensagem por iScroll 17.09.17 16:35

Ele ficou rodando infinitamente ashdusahduashdsauhsuda
O que eu quero é isso:
A cada segundo ele ficar mudando disso: http://prntscr.com/gm8p0j
Pra isso: http://prntscr.com/gm8p8k
Tipo como se eu estivesse colocando e tirando o mouse toda a hora
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Infinto

Mensagem por Luiz 17.09.17 21:16

  1. Remova os códigos passados acima.
  2. Adicione à CSS:
    Código:
    @keyframes fa_animation {
      0% {
        border-color: #b7b7b7;
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
        color: #444;
        border-radius: 50px;
      }
      50% {
        border-color: #2ea3f2;
        -webkit-transform: rotate(15deg) scale(.7);
        transform: rotate(15deg) scale(0.8);
        color: #2ea3f2;
        cursor: pointer;
        border-radius: 50px;
      }
      100% {
        border-color: #b7b7b7;
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
        color: #444;
        border-radius: 50px;
      }
    }
  3. Troque o JavaScript por:
    Código:
    (function ($) {
      'use strict';
     
      $(function () {
        $('img[alt="Novas mensagens"]')
          .closest('td')
            .find('.topic-ball')
              .children('i')
                .css({
                  'animation': 'fa_animation 1s linear infinite',
                })
        ;
      });
     
    }(jQuery));
Luiz

Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Infinto

Mensagem por iScroll 17.09.17 21:28

Perfeito, valeu Luiz.
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Infinto

Mensagem por Luiz 17.09.17 21:29

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz

Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos