Criar movimentos em seus textos e imagens

6 comentários
textos e imagens

Vamos adicionar movimento em seu blog?

Nesse tutorial, vamos ensinar como colocar movimento em seus textos e imagens. O código é simples e você pode fazer várias implementações nele. Abaixo, os movimentos com seus respectivos códigos:

<marquee style="border-bottom: #ff4500 2px solid; border-left: #ff4500 2px solid; border-right: #ff4500 2px solid; border-top: #ff4500 2px solid;">Texto em movimento no BLOG GERENCIADO</marquee>

<marquee style="background: #6495ED;">Texto em movimento em fundo colorido</marquee>



<marquee behavior="alternate" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="10"><font face="Times New Roman" color="#0080c0" size="10"><strong>APRENDENDO COM O BLOG GERENCIADO</strong></font></marquee>



<marquee direction="UP" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="5"><font face="Times New Roman" color="#0080c0" size="3"><strong>Que tal criar textos que se movem na tela?</strong></font></marquee>

<marquee direction="DOWN" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="5"><font face="Times New Roman" color="#0080c0" size="3"><strong>Que tal criar textos que se movem na tela?</strong></font></marquee>

Inserindo imagens no lugar de textos

Também é possível inserir imagens no lugar dos textos para ganhar movimentos.

Os mesmos efeitos aplicados acima podem ser aplicados em imagens. Veja, abaixo, alguns exemplos de como podemos criar movimentos em imagens no lugar de textos:

textos e imagens
<marquee direction="UP" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="5"><font face="Times New Roman" color="#0080c0" size="3"><strong><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTqqCbrl327wUgoOVu2poXxzYSV9NCwDLngI2yHJhYG9ErCLXTxdA"/> <img src="http://4.bp.blogspot.com/-ffJoySDUaXs/Ty_NrSFbE9I/AAAAAAAAAA4/JewuKen6CpI/s1600/Video+Aula.png"/><img src="https://lh3.googleusercontent.com/-EzH-fPEeJfg/UXdmnZsRLfI/AAAAAAAAAMk/n-8O8yq2CK4/w200-h150/photo.jpg"/></strong></font></marquee>

É possível inserir quantas imagens você quiser, basta procurar pelo comando <img src=" " /> e inserir quantos comandos quiser com os respectivos endereços das imagens dentro das aspas.

É importante dizer que as imagens irão se agrupar até atingir a largura da área onde o código será exibido. Ao atingir essa largura, acontece uma quebra de linha automática, desta forma, aparecerá o próximo conjunto de imagens, e assim por diante...

Você deve ter notado que as imagens aparecem de duas em duas, de baixo para cima. Isso acontece porque as duas imagens atingem o limite da largura da área da postagem. Se a área deste post fosse maior, provavelmente apareceriam 3 ou mais imagens, uma ao lado da outra.

Você deve estar se perguntando como fazer para aparecer uma imagem de cada vez.

Isto é simples de resolver! Basta "avisarmos" ao html que queremos uma quebra de linha apás cada imagem.

Para isto, basta inserir a tag <br /> entre os comandos <img src=" " />

Veja o mesmo efeito de cima com as tags <br /> dentro do código:

textos e imagens


Você deve ter notado que no código das imagens, explicado acima, existe um comando chamado UP destacado. Esse comando "diz" qual a direção que as imagens devem percorrer. O mesmo vale para a esquerda, a direita, e para baixo.

Para isso, basta você substituir o UP por down, right ou left.

Nos casos da direita para esquerda e da esquerda para direita não há necessidade de se colocar a tag <br /> entre as tags <img src=" " /> bastando dar um espaço para afastar uma da outra, caso ache melhor.

Veja um exemplo prático do mesmo código acima, só que com o right no lugar do UP:

textos e imagens
Como explicamos, os mesmos efeitos aplicados nos textos em movimento valem para as imagens, basta inserir os códigos mencionados abaixo de cada efeito e substituir os textos por imagens.

Veja, mais uma vez, os exemplos que preparamos:


O que achou? Comente!

6 comentários :

  1. mt boa essa postagem!!!parabéns!!!

    ResponderExcluir
  2. Parabéns pela iniciativa.

    Eu já havia colocado TEXTO EM MOVIMENTO, mas consegui colocar uma imagem em movimento no meu blog com sua instrução.

    Ei-lo: http://5colsemi.blogspot.com.br/

    Obrigada.

    ResponderExcluir
    Respostas
    1. obrigado amigo espero que seutil para você abraço

      Excluir
  3. gostei, me ajudo bastante obrigado.

    ResponderExcluir
  4. EU QUERIA COLOCAR FOTOS EM MOVIMENTO JUNTO COM LINK DE TV ON LINE

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.