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

Participe do fórum, é rápido e fácil

seja bem vindo ao forum eof, caso nao seja cadastrado se cadastre para poder visualizar todo o conteudo ^^
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

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

[tutorial] menu com texto em movimento (js)

3 participantes

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

Kodo no Kami

Kodo no Kami
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)

[Tens de ter uma conta e sessão iniciada para poderes visualizar 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 ^^

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

by Kodo no Kami (hfts315)

https://endoffile.umforum.net

Sun Tzu

Sun Tzu
colaborador
colaborador

Ótimo tutorial, obrigado por compartilhar.

susp3it0virtu@l

susp3it0virtu@l
master
master

Esse [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] também fica legal fts, mas + para você pela explicação Smile

Kodo no Kami

Kodo no Kami
master
master

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

https://endoffile.umforum.net

Conteúdo patrocinado



Ir para o topo  Mensagem [Página 1 de 1]

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