Embed Size (px)
DESCRIPTION
Slides da palestra apresentada no Front in Rio sobre o alternativas ao canvas para desenvolvimento de animações e jogos em html5
Citation preview
animações e jogos além do canvas
Sunday, June 19, 2011
andrews medina
#cobrateam founderdjangobrasil.org / python.org.brdesenvolvedor @ globo.com
Sunday, June 19, 2011
Meet the cure.
Proprietary software is the disease.
Sunday, June 19, 2011
jogos
Sunday, June 19, 2011
Sunday, June 19, 2011
Sunday, June 19, 2011
Sunday, June 19, 2011
Sunday, June 19, 2011
Sunday, June 19, 2011
web
Sunday, June 19, 2011
Sunday, June 19, 2011
Sunday, June 19, 2011
Sunday, June 19, 2011
jogos vs web
Sunday, June 19, 2011
Sunday, June 19, 2011
Sunday, June 19, 2011
html5 + css3 + js
Sunday, June 19, 2011
Sunday, June 19, 2011
Sunday, June 19, 2011
Sunday, June 19, 2011
Sunday, June 19, 2011
Sunday, June 19, 2011
<canvas>
Sunday, June 19, 2011
css3
Sunday, June 19, 2011
transform
• rotate - transform: rotate(7deg);
• skew - transform: skew(-25deg);
• scale -transform: scale(0.5);
Sunday, June 19, 2011
transitions
• transition: transform .5s ease-in;
Sunday, June 19, 2011
animations
@-webkit-keyframes 'animated-sprite' {
0% { background-position: 0px 0px; }
25% { background-position: -1px 0px; }
50% { background-position: -2px 0px; }
75% { background-position: -3px 0px; }
100% { background-position: -7px 0px; }
}
Sunday, June 19, 2011
animations
div.animated-sprite {
background-image: url(animated-sprite.png);
-webkit-animation-name: 'animated-sprite';
-webkit-animation-duration: 1s;
}
Sunday, June 19, 2011
anigma
• http://icefox.net/anigma/
Sunday, June 19, 2011
cubescape
• http://www.themaninblue.com/experiment/Cubescape/load.php?id=1156
Sunday, June 19, 2011
pacman
• https://github.com/andrewsmedina/pacman
Sunday, June 19, 2011
Show me the game
Sunday, June 19, 2011
device orientation
Sunday, June 19, 2011
Show me the game
Sunday, June 19, 2011
canvas + css3
Sunday, June 19, 2011
Andrews Medinaandrewsmedina.com @andrewsmedina
obrigado!
Sunday, June 19, 2011
![[DevCamp 2014] Melhorando a Usabilidade com Animações](https://img.dokumen.tips/doc/110x75/5562cd29d8b42a63498b46e1/devcamp-2014-melhorando-a-usabilidade-com-animacoes-558499dc8e07c.jpg)
