Hitskin.comIsto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
ArtigosEfeito Infinto
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Efeito Infinto
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- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Re: Efeito Infinto
por Luiz 17.09.17 14:14
Adicione à sua CSS:
E mude o JavaScript por:
o/
- 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);
}
}
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- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Efeito Infinto
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
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- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Re: Efeito Infinto
por Luiz 17.09.17 21:16
- Remova os códigos passados acima.
- 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;
}
}
- 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- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
iScroll- Super Membro
- Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311 -
Re: Efeito Infinto
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- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Tópicos semelhantesFórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos