Logo rotativo

3 participantes

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

Tópico resolvido Logo rotativo

Mensagem por Snowbøx 29.03.14 3:12

Qual é minha questão:
Boa noite~!

Vi um efeito interessante em um fórum, e queria saber se é possível aplicá-lo no meu fórum.
http://rpgadventure.umforum.net/forum

Esse efeito de uma imagem 'deslizando' pela horizontal, por trás de "RPG Adventure"

Endereço do meu fórum:
http://snowonderland.forumeiros.com

Versão do fórum:
PHPBB3


Última edição por Snowbøx em 03.04.14 1:15, editado 1 vez(es)
Snowbøx

Snowbøx
Novo Membro

Membro desde : 26/03/2014
Mensagens : 13
Pontos : 21

http://snowonderland.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Logo rotativo

Mensagem por Kyo Panda 29.03.14 10:34

Olá,

Adicione isso ao seu CSS:

Código:
#logo-desc {
    background: url(http://i.imgur.com/wj4zsDz.png) repeat center;
}

Mude o https://i.imgur.com/wj4zsDz.png para a imagem desejada.

E adicione isso a um novo módulo Javascript:

Código:
$(function() {
    var counter, logo;
    counter = 0;
    logo = $('#logo-desc');
    setInterval(function() {
        logo.css('background-position-x', counter);
        counter -= 1;
    }, 16);
});

Aumente o 16 para desacelerar a rotação.

Não se esqueça de inserir um logo menor, para que o rotativo fique visível.

Abraços. Feliz
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Logo rotativo

Mensagem por Snowbøx 29.03.14 16:41

Obrigado, mas a imagem não está rodando...

Print do JavaScript:
Logo rotativo CKULdk9
Snowbøx

Snowbøx
Novo Membro

Membro desde : 26/03/2014
Mensagens : 13
Pontos : 21

http://snowonderland.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Logo rotativo

Mensagem por Roevs 29.03.14 17:10

Olá,

Entrei em seu fórum e a imagem esta rodando normalmente atras do logo

Até
Roevs

Roevs
Membro Entusiasta
Membro Entusiasta

Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343

https://www.sololevelingrpg.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Logo rotativo

Mensagem por Snowbøx 29.03.14 18:22

Hmm... Estranho...

Pelo menos comigo, não está funcionando no Mozilla Firefox.

Esse código só é funcional em alguns navegadores?

Edit: Também funciona no Internet Explorer.
Snowbøx

Snowbøx
Novo Membro

Membro desde : 26/03/2014
Mensagens : 13
Pontos : 21

http://snowonderland.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Logo rotativo

Mensagem por Kyo Panda 30.03.14 2:23

Então, eu verifiquei e descobri o erro: Parece que o Firefox é o único navegador da atualidade que não reconhece o CSS de posicionamento horizontal da imagem de fundo dos elementos.

Fiz as alterações para funcionar:

Código:
$(function() {
    var counter, logo;
    counter = 0;
    logo = $('#logo-desc');
    setInterval(function() {
        logo.css('background-position', counter + 'px 0');
        counter -= 1;
    }, 16);
});

Feliz

Spoiler:
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

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


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