Google y Apple nos han vendido que HTML5 es el futuro (mas algunas cositas más), pero hasta este momento no hay una buena forma de reemplazar las animaciones de Flash, a pesar que javascript puede generar transformaciones de forma eficiente y todos los browsers se están sacando los ojos para acelerar esos procesos.
El problema no radica como ya dije en la capacidad de las librerías que ya están diseñadas en javascript para hacer movimientos, rotación, zoom, y otras cosas simpaticas sino en la complejidad de aprenderlas a todas o domina una ya que son puro código. Por ejemplo esta librería http://jsanim.com/ nos da la posibilidad de hacer cosas muy simpáticas, aunque me gustaría poder animar los objetos "A MANO".
Les dejo un ejemplo para que vean un ejemplo que encontré al respecto usando JQUERY: EJEMPLO
El código lo encontré en éste sitio
Adobe Dreamweaver CS5 no vino preparado para ésto, aunque adobe distribuye un programa sencillo (de ultimo momento lo hicieron asi nomas para la google IO), que permite cargar imagenes con recorte alfa y generar movimientos en los objetos y guardarlos en javascriop para que cualquier navegador lo reproduzca sin plugin. Me vengo preguntando, porque algo que está basado en estándares tan abiertos, donde el código está "A LA VISTA", por ello he posteado en varios foros a ver si algun desarrollador sabe como lograr ésto. Sólo necesitaríamos un plugin de python que exporte los valores desde blender o cualquier otra app que nos sirva para animar.
El problema no radica como ya dije en la capacidad de las librerías que ya están diseñadas en javascript para hacer movimientos, rotación, zoom, y otras cosas simpaticas sino en la complejidad de aprenderlas a todas o domina una ya que son puro código. Por ejemplo esta librería http://jsanim.com/ nos da la posibilidad de hacer cosas muy simpáticas, aunque me gustaría poder animar los objetos "A MANO".
Les dejo un ejemplo para que vean un ejemplo que encontré al respecto usando JQUERY: EJEMPLO
El código lo encontré en éste sitio
Transiciones de efectos encadenables
Este es el poder del encadenamiento de movimiento de Jquery Linea 1: when thecuando se clickea en
Linea 2: anima al
opacity=0.1, deja la propiedad hasta alcanzar los 400px, con la velocidad de 1200 (milisegundos).
Linea 3: luego opacity=0.4, top=160px, height=20, width=20, with speed "slow"
Linea 4: luego opacity=1, left=0, height=100, width=100, with speed "slow"
Linea 5: luego opacity=1, left=0, height=100, width=100, with speed "slow"
Linea 6: luego top=0, with speed "fast"
Linea 7: luego slideUp (default speed = "normal")Linea 8: luego slideDown, with speed "slow"
Linea 9: return false evitara que el browser salte al ancla de link (link anchor)
para hacer funcionar esto se debe agrejar el siguiente javascript (puede estar dentro de un archivo.js o en la cabecera del archivo) y agregar la llamada a jquery que puede descargarse desde: http://jquery.com/
$(document).ready(function()
{
$(".run").click(function(){
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;
});
});
Alguien se ofrece como voluntario?
