Logo rotativo

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

Resolvido Logo rotativo

Mensagem por Snowbøx em Sab 29 Mar 2014 - 0: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 Qua 2 Abr 2014 - 21:15, editado 1 vez(es)
avatar

Snowbøx
Nível 2

Masculino
Inscrito dia : 26/03/2014
Mensagens : 13
Pontos Ativos : 21

Ver perfil do usuário http://snowonderland.forumeiros.com/

Resolvido Re: Logo rotativo

Mensagem por Kyo Panda em Sab 29 Mar 2014 - 7:34

Olá,

Adicione isso ao seu CSS:

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

Mude o http://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
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4637
Pontos Ativos : 5917

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Logo rotativo

Mensagem por Snowbøx em Sab 29 Mar 2014 - 13:41

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

Print do JavaScript:
avatar

Snowbøx
Nível 2

Masculino
Inscrito dia : 26/03/2014
Mensagens : 13
Pontos Ativos : 21

Ver perfil do usuário http://snowonderland.forumeiros.com/

Resolvido Re: Logo rotativo

Mensagem por iPrompt em Sab 29 Mar 2014 - 14:10

Olá,

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

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Logo rotativo

Mensagem por Snowbøx em Sab 29 Mar 2014 - 15: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.
avatar

Snowbøx
Nível 2

Masculino
Inscrito dia : 26/03/2014
Mensagens : 13
Pontos Ativos : 21

Ver perfil do usuário http://snowonderland.forumeiros.com/
  • 0

Resolvido Re: Logo rotativo

Mensagem por Kyo Panda em Sab 29 Mar 2014 - 22: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:
IE 1 x 0 Firefox Muito feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4637
Pontos Ativos : 5917

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum