Page 61 - Locaweb - Edição 28
Basic HTML Version
locaweb
O Ceaser é bem
familiar para
quem já utilizou
as equações
de Robert
Penner no
desenvolvimento
em Adobe
Flash e, por
consequência,
no framework
para JavaScript
Jquery
Site do Ceaser: Matthew Lein criou o Ceaser para, entre outros itens, diminuir a
perda de tempo entre a IDE de desenvolvimento e o navegador de internet
foi realizada por alguns frameworks JavaScript, como
Jquery, mootolls,Yui, entre outros. Como se sabe, o CSS é
responsável pela aparência dos elementos HTML. E isso
inclui animações. Para criar esse tipo de elemento com o
CSS 3, é interessante adotar os seguintes princípios:
• Configurar o estado padrão do elemento CSS;
• Definir como o elemento vai ser exibido
em seu estado final;
• Escrever em uma rotina de transação
acionada pelo evento;
• Nessa rotina, especificar o tempo de transição,
opcionalmente definir as propriedades do
elemento que devem mudar durante a
animação e especificar essa taxa de mudança.
#widthHeight:
{ transition :all 500ms; }
#widthHeight:hover:
{ width: 255px; height: 255px; line-height: 255px; }
#scale:
{ transition:all 500ms; }
#scale:hover:
{ transform:scale(2.0, 2.0); }
Acima, há um exemplo de animação com CSS 3.
Nele, há um elemento com o id #widthHeight. Ao passar
o mouse, realizando o evento de :hover, o item se expande
em termos de altura e largura.
No elemento com id #scale, ao passar o mouse,
realizando também o evento de :hover, o item aumenta em
altura e largura de forma absoluta. No CSS 3, as transições
das novas funcionalidades é algo interessante.
Por mais que a ferramenta possua esses fantásticos
recursos de animação, escrever o código é um pouco
mais complicado do que a maioria das regras encontradas
no CSS. Isso cria uma barreira de aprendizado no
desenvolvedor e no designer de plataformas digitais.
Além disso, há outro problema: ocorre muita perda
de tempo entre a IDE de desenvolvimento e o navegador,
que trocam os valores para tentar chegar à solução
ideal. Para facilitar esse trabalho, o desenvolvedor
Matthew Lein
criou o Ceaser
.Trata-se de um gerador
de código útil, com saída em CSS 3, que personaliza a
criação de transições com uma fantástica precisão.
O Ceaser é bem familiar para quem já utilizou as
equações de Robert Penner
no desenvolvimento
em Adobe Flash e,
por consequência,
no framework para
JavaScript Jquery.
Basicamente, a
ferramenta inclui a
a
maioria das
equações de
Robert Penner. Ao
61
