Foros del Web » Creando para Internet » HTML »

Animación tras hacer clic en un botón.

Estas en el tema de Animación tras hacer clic en un botón. en el foro de HTML en Foros del Web. Hola a todos y gracias por anticipado por leer este mensaje. El otro día me preguntaron si era posible, que al hacer clic sobre un ...
  #1 (permalink)  
Antiguo 29/06/2013, 16:32
 
Fecha de Ingreso: febrero-2002
Mensajes: 351
Antigüedad: 22 años, 1 mes
Puntos: 19
Animación tras hacer clic en un botón.

Hola a todos y gracias por anticipado por leer este mensaje.

El otro día me preguntaron si era posible, que al hacer clic sobre un botón o un enlace (ENTRAR) de una página introductoria de una web, se produjese una animación antes de ir a la página principal de esa web.

En principio, mi respuesta fue que ya se está perdiendo el poner una pagina intro, que al final termina aburriendo siempre de hacer clic en ella. Supongo que siempre habrá la opción de comprobar si el usuario está registrado y hacer saltar esa página automáticamente.

Pero, vamos a la cuestión de este mensaje. Yo se que con Flash se podía hacer fácilmente esto. Pero con HTML5 no tengo claro como hacer que al hacer clic sobre un enlace o botón, se vea una animación, antes de pasar a la página siguiente.

¿Alguien tiene idea de cómo hacerlo?, ¿algún tutorial o video donde pueda ver algún ejemplo?.

Un saludo y gracias por anticipado.
  #2 (permalink)  
Antiguo 29/06/2013, 16:39
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: Animación tras hacer clic en un botón.

Sí. Puedes hacer cosas sencillas con css... incluso bastante elaboradas, pero que tengan buen equilibrio entre impacto y performance.

http://www.w3schools.com/css3/css3_transitions.asp
http://css3.bradshawenterprises.com/transitions/

Con un framework de css
http://daneden.me/animate/

Para algo más elaborado habría que explorar Jquery

http://www.sequencejs.com/themes/modern-slide-in/

o JavaScript programado a la medida, donde necesitarás un programador.

La tendencia no es una intro como tal, sino un encabezado dentro de una página principal.

Una lista pa estudiarse: http://www.jsdb.io/animation/?sort=rating

Y otra, meter un video.

Última edición por Rafael; 29/06/2013 a las 16:53
  #3 (permalink)  
Antiguo 29/06/2013, 17:04
 
Fecha de Ingreso: febrero-2002
Mensajes: 351
Antigüedad: 22 años, 1 mes
Puntos: 19
Respuesta: Animación tras hacer clic en un botón.

Vaya respuesta más trabajada Rafael, muchas gracias

Voy a revisar toda la información que me indicas, pero claro el problema es que necesitaría un código que al hacer clic sobre un enlace o un botón me muestre una animación, y segundos después (o una vez finalizada esa animación) salte automáticamente a la página principal de la web.

En los primeros enlaces que me has indicado veo que las animaciones se realizan con el evento hover, pero no es exactamente lo que busco.

Un saludo y gracias por tu ayuda ;)
  #4 (permalink)  
Antiguo 16/07/2013, 06:03
Avatar de autonotel  
Fecha de Ingreso: junio-2003
Ubicación: Vigo
Mensajes: 480
Antigüedad: 20 años, 9 meses
Puntos: 13
Respuesta: Animación tras hacer clic en un botón.

Es más bien puro javascript o jQuery.
Un sencillo javascript para este ejemplo:

Me imagino que lo que pretende tu cliente es que se vea algo mientrras no se carga la página siguiente, ya que en ciertos dispositivos si no sale nada, el usuario le estará dando al botón dale que dale hasta que se cargue la otra página.

Te recomiendo que escribas un div con un gif de esos que dan vueltas, en cualquier sitio, con display none:
En este caso solo pongo loading... en lugar de un gif.
<div id="loading" style="height:100px; display:none"><br /><br /><br /><br />loading...</div>

al final de la página pon este script:
<script language="javascript">
function loading(){
document.getElementById("loading").style.display=" block";

}
</script>

Y al botón le añades onclick="loading()"

De esta manera aparecerá "loading..." mientras la siguiente página no esté cargada.
  #5 (permalink)  
Antiguo 19/07/2013, 13:43
Avatar de Jotaze  
Fecha de Ingreso: mayo-2010
Mensajes: 15
Antigüedad: 13 años, 10 meses
Puntos: 2
Respuesta: Animación tras hacer clic en un botón.

Saludos y si lo que se quiere es animar la página completa desde un botón de menú como estos:

http://www.colouredlines.com.au/

¿Que sugerirían?

Jotaze
  #6 (permalink)  
Antiguo 19/07/2013, 14:40
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Animación tras hacer clic en un botón.

Eso ya son cosas más complejas y habría que ir mirando. Pero de forma general, una combinación de CSS y JavaScript no intrusivo sería lo indicado seguramente.
  #7 (permalink)  
Antiguo 22/07/2013, 09:14
Avatar de Jotaze  
Fecha de Ingreso: mayo-2010
Mensajes: 15
Antigüedad: 13 años, 10 meses
Puntos: 2
Respuesta: Animación tras hacer clic en un botón.

Cita:
Iniciado por pzin Ver Mensaje
Eso ya son cosas más complejas y habría que ir mirando. Pero de forma general, una combinación de CSS y JavaScript no intrusivo sería lo indicado seguramente.
Gracias Pzin

Encontré este plug-in para Jquery, quizá es útil para alguien que esté queriendo hacer algo como lo que yo pregunté: http://www.zehfernandes.com/jquery.fullContent/#home

Estoy evaluándolo, lo que necesito es usar una animación de página completa en un menú clásico de que enlaza a otras páginas, esta opción funciona bien para DIVs en una sola página

Se que es meterse el código javascript, quizá enviando valores de variables js, no soy un experto en eso, por eso, si tienen alguna recomendación para usarlo con un menú común y corriente que enlaza varias páginas agradezco sus ideas.

Jotaze

Etiquetas: clic, html5, todo, tras
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 01:20.