Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

girotto000

Texto deslizar e rotacionar

Recommended Posts

Gostaria de aplicar um efeito javascript no meu texto, em que quando o usuário passasse o mouse em cima do texto, o texto iria deslizar para o lado e iria rotacionar 90 graus ao mesmo tempo.

Eu consegui o código para rotacionar, que no caso é esse daqui:

 

 

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="jqueryrotate.js"></script>
<script>
$(document).ready(function(){
        var value = 0
        $("#forum").mouseover(function(){value +=90; 
        $('#forum').rotate({animateTo:value})
        });
$("#forum").mouseout(function(){value +=-90;
$('#forum').rotate({animateTo:value})
});
});
</script>
<p id="forum" align="center">Fórum</p>

 

A principio ele está funcionando bem, quando eu passo o mouse em cima ele rotaciona direitinho.

Agora o efeito para que ele deslize para o lado eu não consigo achar em lugar nenhum! Alguém pode me ajudar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

faz assim:

 

Html

 

<div style="width: 1000px">
 <p id="text" style="margin-left: -100px" >HXanburzum</p>
</div>


jquery

function ani(){
    $('#text').animate(
        {'margin-left': '1000px'},
        10000, // duration
        function(){
            $('#text').css('margin-left','-100px');
            ani();
        });
    }

Aqui alguns plugins jQuery para este fim

 

JQUERY NEWS TICKER

liScroll (a jQuery News Ticker) 1.0

jQuery Marquee Demo

Modern News Ticker(paid)

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

Olá xanburzum!

Então, o exemplo não funcionou :/

E eu li todas as matérias que tu me mandou, mas parece que nenhum atende 100% ao que eu quero, simplesmente pelo fato de que eu queria que o texto andasse uma determinada distancia e parasse, e a maioria só para com o mouse em cima, ou quando clica ou quando alguma ação é executada.

Compartilhar este post


Link para o post
Compartilhar em outros sites

já pensou em um tipo de marquee em jquery ou um ticker personalizado para seu propósito.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Coloca um position: relative usando CSS no objeto a ser animado...

 

no jQuery você faz assim:

$("qualquer_objeto").animate({"left": "+=100px"}, 500);

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.