Agora já é possível usar CSS para criar efeitos que antes eram possíveis apenas usando Flash. O CSS3 permite construir animações e efeitos sofisticados até, como aqueles em 3D, e o melhor: tudo de forma bem simples. Ou seja, o céu é o limite para quem deseja aliar JavaScript ao CSS3 e criar apps ultramodernas (e com cara de que levaram muuuito tempo para fazer). Mas no vídeo abaixo você verá que nem é tão trabalhoso ou difícil assim. Felipe Moura até criou um personagem para mostrar como é simples fazer efeitos e animações múltiplas em CSS3. E analisa detalhadamente várias referências e conceitos, como:
Performance:
- Animações em JS rodam baseadas em tempos (agendamentos)
- JavaScript é uma linguagem interpretada pelo browser
- Animações em CSS3 são executadas nativamente pelo navegador
- Melhor apoiada na placa gráfica para o processamento
- Diferentes reflow (posições e tamanhos) e repaint
- Pense no mobile
Tipos de animações e efeitos no CSS3:
- Bordas
- Transparência
- Transform
- Rotate
- Deslocar
- Escala
- Sombra do texto
- Distorção (para simular efeitos 3D)
- Ponto de origem
- Keyframes
Ferramentas:
http://css3please.com
http://fmbip.com/
http://960.gs
http://css3generator.com
http://gradients.glrzad.com
http://www.sencha.com/products/animator
http://labs.adobe.com/technologies/edge
http://jsfiddle.net
http://daneden.me/animate
Nenhum comentário:
Postar um comentário