Foros del Web » Creando para Internet » CSS »

Duda con anicmacion y html5

Estas en el tema de Duda con anicmacion y html5 en el foro de CSS en Foros del Web. Buenos días. Soy nuevo en este foro. Trabajé como soporte técnico y fui programador, pero hace años que me dedico a otra cosa. Estoy tratando ...
  #1 (permalink)  
Antiguo 16/04/2016, 10:47
 
Fecha de Ingreso: abril-2016
Ubicación: Argentina
Mensajes: 5
Antigüedad: 5 años, 7 meses
Puntos: 0
Duda con anicmacion y html5

Buenos días. Soy nuevo en este foro. Trabajé como soporte técnico y fui programador, pero hace años que me dedico a otra cosa. Estoy tratando de actualizarme respecto a diseño , estoy practicando y estudiando css3 y html5 , me resulta por demas interesante pero me surgen numerosas dudas. En resumen, agradeceré vuestra ayuda y comprensión, y en la medida de mis conocimientos intentaré colaborar en lo que pueda ser de utilidad.

Estoy tratando de diseñar una web orientada a autos de alquiler. Logré resolver el aspecto de la página principal, y me surgió la idea de exponer una animación. Para ello utilizo un código que encontré en la web donde en el html creo un div principal de aprox 900x600 px y le cargo una lista desordenada con 4 imagenes en block. Mediante animacion de 22s visualizo cada imagen durante unos segundos hasta que llego a la última, que se desvanece mediante opacity:0 .

La idea de la animación es que sea una presentación, al terminar, 22s, quisiera que sea reemplazada por otro Div donde armaría 3 secciones con fotos y texto.
No se me ocurre cual es la forma de implementarlo, se que la duda no es muy clara, pero quisiera saber si hay una forma simple o habitual y correcta de resolverlo.
No cito el codigo porque tendría que invadir el post con el html y el ccs , pero no tengo problema de postearlo si alguien me echa una mano.

Gracias adelantadas!
  #2 (permalink)  
Antiguo 16/04/2016, 11:22
 
Fecha de Ingreso: mayo-2013
Mensajes: 191
Antigüedad: 8 años, 6 meses
Puntos: 10
Respuesta: Duda con anicmacion y html5

creo que algun manejo del animationend te puede servir.
mira un poco estos enlaces

http://www.sitepoint.com/css3-animat...vent-handlers/
https://davidwalsh.name/css-animation-callback

pero si usas jquery se resuelve mas facil con los callbacks
  #3 (permalink)  
Antiguo 23/04/2016, 10:35
 
Fecha de Ingreso: abril-2016
Ubicación: Argentina
Mensajes: 5
Antigüedad: 5 años, 7 meses
Puntos: 0
Respuesta: Duda con anicmacion y html5

ups, gracias por tu asistencia. Ahora se me complica. La nimacion la hice en Css3 , por lo que veo tengo que hacerla con animation de jquery ?
  #4 (permalink)  
Antiguo 25/04/2016, 08:43
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 7 años, 4 meses
Puntos: 26
Respuesta: Duda con anicmacion y html5

Sería bueno lo subieces a jsfiddle o algo asi o codepen pero en general es clara tu duda.

Yo no veo necesario metas jquery para solucionarlo, pero tal vez después de que termine la animación podrías ocultar el div contenedor de la animación (display:none) y mostrar el div contenedor de los textos e imágenes (display:inline).

Esto es como un comentario general de como se me ocurre solucionarlo, de igual espero te de una idea, ojalá logres el resultado deseado.

Te mando un saludo!
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #5 (permalink)  
Antiguo 29/04/2016, 09:19
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 8 años
Puntos: 39
Respuesta: Duda con anicmacion y html5

No es necesario usar javascript, porque con css es posible lograrlo, te pongo un ejemplo de una demo que hice hace tiempo, pero que modifique para adaptarla a más o menos lo que quieres lograr:

http://codepen.io/g3kdigital/pen/EKdLPX?editors=1100
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital

Etiquetas: html, html5, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:44.