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!!!