Como mover uma caixa com CSS

Escrito por william harrel | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como mover uma caixa com CSS
Anime uma caixa deslizante com CSS (Jupiterimages/Comstock/Getty Images)

Antes da norma web relativamente moderna de "folhas de estilo em cascata" (CSS) chamada CSS3, os designers deviam criar animações simples, como caixas que se moviam ao longo de uma página web, usando Flash. CSS3, uma linguagem de formatação de elementos web, permite criar esses tipos de animações com folhas de estilo embutidas no código HTML. HTML é a linguagem de marcado predominante na web. A vantagem de usar CSS3 para criar animações simples é que o código CSS não precisa que o navegador do usuário baixe arquivos Flash externos.

Nível de dificuldade:
Desafiante

Outras pessoas estão lendo

Instruções

  1. 1

    Crie uma nova página no programa que você usar para editar HTML. Você pode usar o "doctype" padrão "XHTML Transitional" para a mesma. O código deveria começar assim:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Animação</title>

    O par de tags <title> pode, é claro, conter qualquer título que você escolher.

  2. 2

    Crie o seletor da caixa CSS. Em CSS, um seletor define um objeto ou uma área na página. Você pode fazer uma caixa do tamanho e cor que você quiser. O seguinte código CSS cria uma caixa preta de 200x200 pixels. Coloque-a diretamente embaixo do par de tags <title>.

    <style>

    box {

    width: 200px; height: 200px; background-color: black; position: absolute; top: 0px; left: 0px; }

    Para editar o tamanho da caixa, altere as propriedades "width" (largura) e "height" (altura). Para alterar a cor da caixa, edite a propriedade "background-color". As últimas três propriedades estabelecem a posição da caixa, neste caso, no canto superior esquerdo da página.

  3. 3

    Crie o seletor de controle CSS para a animação. O código seguinte usa extensões WebKit, que funcionam com a maioria dos navegadores. Coloque-o diretamente embaixo do código do seletor da caixa.

    .squarePath { -webkit-animation-name: squarePath; -webkit-animation-duration: 8s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; }

    A propriedade "webkit-animation-name" define o nome da animação para ser referenciado no código de JavaScript que a executa. As seguintes três propriedades estabelecem a duração da animação em 8 segundos, com entrada e saída atenuadas e iterações infinitas. "Atenuar" é um efeito especial de animação que cria pausas ao longo do caminho da animação. Uma atenuação "in-out" faz uma pausa no começo e no final do caminho. Para pausar uma animação só no começo, use o "ease-in". O "iteration-count" configura a quantidade de vezes que a animação é executada. "Infinite" cria uma animação que não acaba.

  4. 4

    Crie o seletor do caminho da animação. O seguinte código cria um caminho de quatro pontos formando um quadrado. A caixa se move pela página para a direita, depois para baixo, depois para a esquerda e finalmente volta para a posição original. Coloque-a diretamente embaixo do código que você criou no passo 3.

    @-webkit-keyframes squarePath { from { top: 0px; left: 0px; }

    25% { top: 0px; left: 200px; }

    50% { top: 200px; left: 200px; }

    75% { top: 200px; left: 0px; }

    100% { top: 0px; left: 0px; } } </style>

    Note que as propriedades "top" e "left" indicam à animação em que posições, medida em pixels, deve parar a caixa. O tag </style> fecha o código CSS.

  5. 5

    Crie o JavaScript. O código seguinte executa a animação de acordo com as instruções dos seletores CSS. Coloque-o diretamente embaixo do tag </style>.

    <script type="text/javascript"> function move() { document.getElementById("box").className = "squarePath"; } </script> </head>

    Note que o script sabe quais instruções usar porque há uma referência ao seletor "squarePath" que você criou no passo 3. O tag </head> fecha a seção <head> da página.

  6. 6

    Coloque a animação na seção "body" da página. É nessa seção que os elementos da página se mostram. O código abaixo indica ao navegador qual seletor CSS usar, fazendo uma referência ao seletor "#box" que você criou no passo 2. Coloque este código diretamente embaixo da tag </head>.

    <body onload="move()"> <div id="box"> </div> </body> </html>

    A propriedade "onload=" indica ao navegador que deve começar a animação quando a página carrega. A tag </body> fecha a seção "body" da página, e a tag </html> fecha, ou termina, a página web.

Dicas & Advertências

  • Você pode modificar esta animação de muitas formas, incluindo a forma, o tamanho e a cor da caixa, além do caminho e da atenuação, substituindo as propriedades CSS3 por outras válidas. Você poderá encontrar uma lista completa de propriedades de CSS3 no site da W3C. W3C é o consórcio que desenvolve e mantém as normas web.
  • Nem todos os navegadores suportam as extensões WebKit. No entanto, aqueles que não as suportam possuem outras próprias, tais como ".moz" para os navegadores baseados no Mozilla. Não é incomum ter que criar várias versões de código CSS para que funcionem com todos os navegadores.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível