Estava vendo no site da Nasa uma animação do robô Curiosity (aquele que esta em Marte), me chamou a atenção a animação feita em Html, procurei o elemento canvas no código fonte, no html gerado e no navegador e não achei.
Vi muitas divs e elementos “crus” com css, imagens de fundo e manipulados por javascript, também tem o uso de jquery na animação, várias funções feitas com o cifrão tão comum à esta biblioteca.
Achei legal o esquema, mas veio a pergunta, como foi feito?
Não achei demasiadamente complexo a ponto de não poder ser feito na mão com o uso de uma IDE comum, mas será que foi na raça ou alguma ferramenta complementar? Se foi na raça então teve uma boa dose de talento aplicado.
Segue o link da “curiosa” animação do Curiosity: http://mars.jpl.nasa.gov/msl/multimedia/interactives/edlcuriosity/index-2.html
Se você observar, no final da página (antes do fechamento da tag body) tem as chamadas JavaScript:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrolling-parallax.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/play.js"></script>
<script type="text/javascript" src="js/content.js"></script>
<script type="text/javascript" src="js/altitude.js"></script>
Não verifiquei se utilizam HTML 5 ou outra tecnologia.
É realmente um trabalho muito interessante usando somente HTML e Javascript.
Se reparar tem 2 imagens gigantescas que são usadas de fundo e causam uma “ilusão” de que as coisas estão se mexendo…
As manipulações dos outros objetos são layers simples…
Exato jmmenezes,
no http://mars.jpl.nasa.gov/msl/multimedia/interactives/edlcuriosity/js/altitude.js você consegue até ver a definição da taxa de scroll que ele tem que fazer na imagem a cada medida e as informações que vão aparecer naquele momento.
'1000mi': {
'description': 'Guided Entry: Cruise Stage Separation',
'altitude': { 'standard': [ 1000, 'mi' ], 'metric': [ 1609, 'km' ] },
'velocity': { 'standard': [ 11408, 'mph' ], 'metric': [ 18360, 'kmph' ] },
'scroll': 0.02
},
'900mi': {
'description': '<div style="font-size: 16px;">Guided Entry: Separation Cruise Balance Mass Devices</div>',
'altitude': { 'standard': [ 900, 'mi' ], 'metric': [ 1448, 'km' ] },
'velocity': { 'standard': [ 11408, 'mph' ], 'metric': [ 18360, 'kmph' ] },
'scroll': 0.05
}