Logo rotativo

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

Resolvido Logo rotativo

Mensagem por Snowbøx em 29/03/14, 12:12 am

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 02/04/14, 09:15 pm, 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 29/03/14, 07:34 am

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 : 4638
Pontos Ativos : 5914

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

Resolvido Re: Logo rotativo

Mensagem por Snowbøx em 29/03/14, 01:41 pm

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 29/03/14, 02:10 pm

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 29/03/14, 03:22 pm

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 29/03/14, 10:23 pm

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 : 4638
Pontos Ativos : 5914

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

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

- Tópicos similares

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