seja bem vindo ao forum eof, caso nao seja cadastrado se cadastre para poder visualizar todo o conteudo ^^

Você não está conectado. Conecte-se ou registre-se

 » Programação Web » Javascript / Jquery / Ajax » [tutorial] menu com texto em movimento (js)

[tutorial] menu com texto em movimento (js)

Ir em baixo  Mensagem [Página 1 de 1]

1 [tutorial] menu com texto em movimento (js) em Seg Nov 25, 2013 1:13 pm

Kodo no Kami

avatar
master
master
e ae galera a pedido de um mano to fazendo esse tutorial de como criar um menu com o texto em movimento tipo o do forum mesmo (obs: nao fui eu que fiz o desse forum)

[Você precisa estar registrado e conectado para ver esta imagem.]

existe varias formas de criar esse menu vamos criar o nosso com javascript e css, para começar criamos uma pagina basica

Código:
<html>
<head>
</head>
<body>
</body>
</html>
agora criamos uma div que sera o menu ou seja a parte fixa (eu vou chamar de ftsmenu), e dentro dela criamos outra div que vai ficar mexendo dentro (eu vou chamar de ftsmov)

Código:
<html>
<head>
</head>
<body>
   <div id="ftsmenu">
      <div id="ftsmov">
      </div>
   </div>
</body>
</html>
agora vamos para parte css, no primeiro div (ftsmenu) temos que colocar ele em uma posição que no caso é absolute e redimensiona-lo com width e height, podemos usar word-wrap para o texto nao passar o limite dele (tambem coloquei outra cor do fundo para ficar facil ver os limites dele)

Código:
<html>
<head>
   <style type="text/css">
      #ftsmenu{
        width: 150px;
       height: 200px;
       position: absolute;
       word-wrap: break-word;
       background-color: yellow;
     }
   </style>
</head>
<body>
   <div id="ftsmenu">
      <div id="ftsmov">
      </div>
   </div>
</body>
</html>
vou escrever um texto dentro do segundo div (ftsmov), e tambem mudar a posição dele com o top e um numero menor que o height do primeiro div (ftsmenu)

Código:
<html>
<head>
   <style type="text/css">
      #ftsmenu{
        width: 150px;
       height: 200px;
       position: absolute;
       word-wrap: break-word;
       background-color: yellow;
     }
     #ftsmov
     {
        position: absolute;
        top: 170px;
     }
   </style>
</head>
<body>
   <div id="ftsmenu">
      <div id="ftsmov">
        by Kodo no Kami
      </div>
   </div>
</body>
</html>
agora vem a parte dinamica ou seja o javascript, criamos uma função que eu chamei de fts_mudar

Código:
<html>
<head>
   <style type="text/css">
      #ftsmenu{
        width: 150px;
       height: 200px;
       position: absolute;
       word-wrap: break-word;
       background-color: yellow;
     }
     #ftsmov
     {
        position: absolute;
        top: 170px;
     }
   </style>
   <script type="text/javascript">
      function fts_mov()
     {
     }
   </script>
</head>
<body>
   <div id="ftsmenu">
      <div id="ftsmov">
        by Kodo no Kami
      </div>
   </div>
</body>
</html>
criamos uma variavel fora da função que vai ser o valor que vai mudando a cada vez que for chamado a função no caso o valor aqui vai ser 170, e decrementamos o valor dentro da função

Código:
<html>
<head>
   <style type="text/css">
      #ftsmenu{
        width: 150px;
       height: 200px;
       position: absolute;
       word-wrap: break-word;
       background-color: yellow;
     }
     #ftsmov
     {
        position: absolute;
        top: 170px;
     }
   </style>
   <script type="text/javascript">
      var valor = 170;
      function fts_mov()
     {
        valor -= 10;
     }
   </script>
</head>
<body>
   <div id="ftsmenu">
      <div id="ftsmov">
        by Kodo no Kami
      </div>
   </div>
</body>
</html>
tambem criamos uma condição caso chegue a 0 ele volta para o valor para 170

Código:
<html>
<head>
   <style type="text/css">
      #ftsmenu{
        width: 150px;
       height: 200px;
       position: absolute;
       word-wrap: break-word;
       background-color: yellow;
     }
     #ftsmov
     {
        position: absolute;
        top: 170px;
     }
   </style>
   <script type="text/javascript">
      var valor = 170;
      function fts_mov()
     {
        valor -= 10;
       if(valor <= 0)
       {
          valor = 170;
       }
     }
   </script>
</head>
<body>
   <div id="ftsmenu">
      <div id="ftsmov">
        by Kodo no Kami
      </div>
   </div>
</body>
</html>
usamos a função getElementById para mudar o atributo do style.top do segundo div (ftsmov)

Código:
<html>
<head>
   <style type="text/css">
      #ftsmenu{
        width: 150px;
       height: 200px;
       position: absolute;
       word-wrap: break-word;
       background-color: yellow;
     }
     #ftsmov
     {
        position: absolute;
        top: 170px;
     }
   </style>
   <script type="text/javascript">
      var valor = 170;
      function fts_mov()
     {
        document.getElementById("ftsmov").style.top = valor + "px";
        valor -= 10;
       if(valor <= 0)
       {
          valor = 170;
       }
     }
   </script>
</head>
<body>
   <div id="ftsmenu">
      <div id="ftsmov">
        by Kodo no Kami
      </div>
   </div>
</body>
</html>
para terminar usamos a função setInterval para mudar sozinho ^^

Código:
<html>
<head>
   <style type="text/css">
      #ftsmenu{
        width: 150px;
       height: 200px;
       position: absolute;
       word-wrap: break-word;
       background-color: yellow;
     }
     #ftsmov
     {
        position: absolute;
        top: 170px;
     }
   </style>
   <script type="text/javascript">
      var valor = 170;
      function fts_mov()
     {
        document.getElementById("ftsmov").style.top = valor + "px";
        valor -= 10;
       if(valor <= 0)
       {
          valor = 170;
       }
     }
     setInterval(fts_mov,500);
   </script>
</head>
<body>
   <div id="ftsmenu">
      <div id="ftsmov">
        by Kodo no Kami
      </div>
   </div>
</body>
</html>
bom galera é isso ^^

[Você precisa estar registrado e conectado para ver este link.]

by Kodo no Kami (hfts315)


_________________ASSINATURA_________________
[Você precisa estar registrado e conectado para ver esta imagem.]
[Você precisa estar registrado e conectado para ver esta imagem.]

Contato:
Spoiler:

Contato:
Facebook: [Você precisa estar registrado e conectado para ver este link.]
Skype: hackerfts315
http://endoffile.umforum.net

Sun Tzu

avatar
colaborador
colaborador
Ótimo tutorial, obrigado por compartilhar.


_________________ASSINATURA_________________


 
Grupo no RaidCall - Xtreme Hacking: 7149047
  
"O sangue dos inocentes jamais deverá ser derramado. Contudo, o sangue dos maus deverá fluir como um rio."

susp3it0virtu@l

avatar
master
master
Esse [Você precisa estar registrado e conectado para ver este link.] também fica legal fts, mas + para você pela explicação Smile


_________________ASSINATURA_________________

[Você precisa estar registrado e conectado para ver esta imagem.]

Frases:

-"Ninguém baterá tão forte quanto a vida.Porém,não se trata de quão forte pode bater,se trata de quão forte pode ser atingido e continuar seguindo em frente.É assim que a vitória é conquistada" - Rocky Balboa

-"Um homem não está acabado quando enfrenta a derrota. Ele está acabado quando desiste." - Richard Nixon

-"Sometimes,you have to demo a threat to spark a solution" - Barnaby Jack

Kodo no Kami

avatar
master
master
com o marquee e show tambem existem um la do css3 que eu nao lembro kkk


_________________ASSINATURA_________________
[Você precisa estar registrado e conectado para ver esta imagem.]
[Você precisa estar registrado e conectado para ver esta imagem.]

Contato:
Spoiler:

Contato:
Facebook: [Você precisa estar registrado e conectado para ver este link.]
Skype: hackerfts315
http://endoffile.umforum.net

Conteúdo patrocinado


Voltar ao Topo  Mensagem [Página 1 de 1]

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