¿Algún consejo para buenos tutoriales o debates sobre animación de páginas web? [cerrado]

El efecto simple que busco en última instancia es este:

  • cargar una imagen en el centro de una página web
  • hacer que la imagen se deslice hacia la izquierda
  • luego comience a cargar otro texto e imágenes a su alrededor

No me importa cuántas páginas web separadas se requieren para hacer esto, o cuántas imágenes separadas, pero me gustaría saber cuáles son mis opciones. Soy más programador que diseñador gráfico, así que tal vez estoy buscando usando términos técnicos incorrectos. Tal vez "animación" es un término demasiado grandioso para un efecto tan simple, pero "deslizar" tiene otras connotaciones en este contexto, y entre esas dos cosas, estoy luchando por encontrar una forma clara de una respuesta clara. En última instancia, me gustaría entender cosas como:

  • ¿Se puede lograr la tarea anterior con una imagen en una página, en HTML, sin secuencias de comandos?
  • ¿HTML solo admite elementos "estáticos" que aparecen en la pantalla y nunca cambian de posición? Si ese es el caso, ¿toda la animación se basa en tener elementos (estáticos) con contenido dinámico o elementos estáticos cargados / renderizados repetidamente que dan una apariencia de movimiento?
  • ¿Qué tan extendido está el soporte del navegador para las diversas opciones de animación?

Entonces, como sugiere la pregunta original, tal vez un tutorial sería bueno. ¡Todavía no he encontrado uno decente de esos!

No veo cómo esta es una pregunta de diseño gráfico, cuando buscas una solución de codificación (Bueno, hay flash... pero...). Voté para cerrar esto.

Respuestas (2)

Para una solución de "HTML puro", querrá ver animaciones CSS3: http://www.w3schools.com/css3/css3_animations.asp

Sin embargo, si está buscando compatibilidad entre navegadores, este no es el camino a seguir. Como puede ver en esa página, IE aún no admite esto.

Usaría javascript para una solución más amigable entre navegadores. Una buena biblioteca para usar podría ser jqueryui: http://jqueryui.com

IE10 en realidad admite bastante. msdn.microsoft.com/en-us/library/ie/hh673530(v=vs.85).aspx Lo bueno de la animación CSS es que se degrada con gracia y se puede acelerar con GPU (a diferencia de jQuery). Pero estoy de acuerdo si quieres apoyar todo, CSS puede no ser la mejor opción.
¿Cuántas personas tienen javascript deshabilitado como un riesgo de seguridad? ¿Existe el menor de los males?
@omatai Puede usar: css3, jquery (o alguna otra biblioteca de javascript) o flash. Todos estos tienen algún tipo de debilidad. CSS3 = sin soporte de navegador cruzado (y sin funcionalidad de clic, o uno que tenga un buen soporte de navegador de todos modos). jQuery (y js en general) = Este es un método de navegador cruzado. El porcentaje de personas que han deshabilitado js es bastante bajo, AFAIK. Sin mencionar que puede escribir js para que, si una persona lo tiene deshabilitado, recurra a una interfaz/funcionalidad más simple. flash = bastante pesado, buen soporte de navegador, excepto algunas tabletas... a saber, ios.
Un buen ejemplo de complemento jquery que tiene una buena alternativa sólida es Lightbox. Normalmente, obtiene una ventana modal que se desliza en su lugar y tiene una buena navegación y así sucesivamente... Si javascript está deshabilitado, aún puede hacer clic en los enlaces de imagen que se abren como cualquier enlace html normal a la imagen.
@Joonas ¿Qué quiere decir con "funcionalidad sin clic"?
@MarcEdwards Quise decir una pseudoclase que hace algo cuando se hace clic en el elemento. Aunque supongo que si está usando animaciones css3, también podría usar :target...
Entonces... Sí, ignora por completo la parte sobre mí diciendo que css3 no tiene funcionalidad de clic. :)
Si va a seguir la ruta de la animación CSS3, Adobe Edge Animate puede ayudarlo a crear estas animaciones, ¡y es gratis! ¡Y viene con tutoriales incorporados!

Para cubrir específicamente estos puntos:

¿Se puede lograr la tarea anterior con una imagen en una página, en HTML, sin secuencias de comandos?

Podrías falsificarlo con un gran GIF animado incrustado en una página HTML, pero no sería una solución elegante. Esto realmente necesita secuencias de comandos y CSS.

¿HTML solo admite elementos "estáticos" que aparecen en la pantalla y nunca cambian de posición?

Estrictamente hablando, sí. Sin embargo, una página HTML también puede incluir código CSS y Javascript incrustado que puede agregar animación; sería más común tener la mayor parte de CSS y Javscript en archivos separados.

Si ese es el caso, ¿toda la animación se basa en tener elementos (estáticos) con contenido dinámico o elementos estáticos cargados / renderizados repetidamente que dan una apariencia de movimiento?

Más elementos estáticos (que contienen imágenes, bloques de texto o vacíos para empezar) con movimiento o su contenido cargado por scripts.

Pero definitivamente sugeriría usar HTML + CSS para posicionar estáticamente los elementos primero, antes de mirar cualquier secuencia de comandos o animación.

¿Algún consejo para buenos tutoriales o debates sobre animación de páginas web? [cerrado]
RespuestasAquíPolítica de privacidad1y, 0v