[tutorial] menu com texto em movimento (js)

Postagem de conteúdo sobre programação javascript
Post Reply
User avatar
Kodo no Kami
Admin
Admin
Posts: 739
Joined: Fri Jan 02, 2015 1:56 pm
Contact:

[tutorial] menu com texto em movimento (js)

Post by Kodo no Kami » Sun May 03, 2015 9:21 am

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)

Image

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

Code: Select all

<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)

Code: Select all

<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)

Code: Select all

<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)

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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)

Code: Select all

<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 ^^

Code: Select all

<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 ^^

exemplo online

by Kodo no Kami
Image

que desagradavel ~ mirai kuriyama

Post Reply

Return to “Javascript”