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

[KLAYMAN]

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.

[Rafael]

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.

[KLAYMAN]

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 ;)

[autonotel]

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.

[Jotaze]

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

[pzin]

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.

[Jotaze]

Iniciado por pzin

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