¿Un botón que dispara un efecto de CSS?

polecat · #1 (**permalink**) 16/07/2013, 15:19

Hola a todos! Como están?
Estoy teniendo un probema con un diseño que tengo que sacar esta semana.
Se me ocurrió una idea interesante a nivel diseño que, por supuesto, no tengo idea como llevar a la realidad.

La idea:

Tengo un fondo de un túnel y cuando presiono un boton que dice "Salir del túnel", quiero que el fondo de la web (que es el túnel) se agrande desde el centro hacia afuera hasta que la web queda toda blanca y aparece con un fade in la web que tengo ya hecha.

El problema:

Logré hacer un buen CSS temporario (para que ustedes vean el efecto que quiero), pero no tengo idea cómo hacer que ese efecto sea disparado por un boton.

Acá está el sitio tal como está ahora.
Para ver el efecto que quiero (que ya está hecho, solo que el trigger es el incorrecto) mantengan apretado el click sobre cualquier lado de la pantalla.
www.juanmanuelbosi.com.ar/empreza/tunel.html

Este es el CSS:

Código:

html, body {
	height:100%;
	width: 100%;
	margin:0;	
	overflow:hidden;
	
}
#tunel {	
	padding:0;
	width:100%;
	height: 100%;
	margin: 0 auto;
	background: url("images/tunel.jpg") top center no-repeat #000;
	-webkit-transition: all 1.2s ease;
	-moz-transition: all 1.2s ease;
	transition: all 1.2s ease;

	border:0;
}
#tunel:active {
  -webkit-transform: scale(17);
  -moz-transform: scale(17);
  transform: scale(17);
}
.exit {
	color: #FFF;
	padding:10px 25px;
	text-transform: uppercase;
	text-shadow: 2px 2px 3px #92250a;
	-webkit-text-shadow: 2px 2px 3px #92250a;
	moz-text-shadow: 2px 2px 3px #92250a;
	cursor:pointer;
	margin: 20px;
	font-size: 20px;
	border:0;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	moz-border-radius: 6px;
	background: #dd4520;
	background: -moz-linear-gradient(top, #dd4520 0%, #b92100 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd4520), color-stop(99%,#b92100));
	background: -webkit-linear-gradient(top, #dd4520 0%,#b92100 99%);
	background: -o-linear-gradient(top, #dd4520 0%,#b92100 99%);
	background: -ms-linear-gradient(top, #dd4520 0%,#b92100 99%);
	background: linear-gradient(to bottom, #dd4520 0%,#b92100 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4520', endColorstr='#b92100',GradientType=0 );
}

Y este es el HTML:

Código HTML:

<body>

<div id="tunel">
<input class="exit" type="submit" value="Salir del túnel">
</div>
</body>

No tengo conocimientos de javascript y muy poco de CSS3.
Agradezco cualquier ayuda que me puedan brindar.

MUCHAS GRACIAS!!!

pzin · #2 (**permalink**) 16/07/2013, 15:46

En realidad aplicando una clase mediante JavaScript sería suficiente.

A ver qué te parece algo así: http://jsfiddle.net/Qug3t/

Al menos para una idea te dará.

polecat · #3 (**permalink**) 16/07/2013, 17:02

pzin...sos un genio. Esto es exactamente lo que necesito. Voy a probarlo en mi web y te voy mostrando lo que voy logrando.

MUCHISIMAS GRACIAS!!!!!!!!!

polecat · #4 (**permalink**) 16/07/2013, 17:25

Hola pzin...estuve queriendo colocar el codigo que me pasaste en la web, pero no logro hacerlo andar. Mira: http://juanmanuelbosi.com.ar/empreza/tunel.html

Ves algun error que yo no vea? Toco el boton y no pasa nada.

Carlangueitor · #5 (**permalink**) 17/07/2013, 11:51

Pon tu script antes de </body> o usa window.onload

Saludos

polecat · #6 (**permalink**) 25/07/2013, 15:59

Está excelente pero me acabo de dar cuenta que no funciona en IE9....alguna idea para hacerlo funcionar en IE???

Carlangueitor · #7 (**permalink**) 25/07/2013, 16:12

Quizá tengas que agregar los prefijos propietarios, algo como -ms-transition.

Saludos

pzin · #8 (**permalink**) 25/07/2013, 16:37

IE9 no soporta las transiciones: http://caniuse.com/css-transitions