En este tutorial vamos a crear una caja modal que se abrirá por rebote en la pantalla y luego, cuando cierre la caja, aparecerá minimizar fuera de vista.
Para ello vamos a utilizar nuevos Características CSS3 de transformaciones 3D, lo que significa que no será compatible con todos los navegadores. Para obtener la mejor experiencia, deberá utilizar los navegadores webkit más recientes, como Chrome o Safari. También puede ver estas transformaciones 3D de CSS3 en la última versión de Firefox.
Como estamos limitados a lo que ves en diferentes navegadores todavía vamos a usar animación de transición por lo que en los navegadores más antiguos verá un desvanecimiento y desvanecimiento efecto en lugar de un rebote. También vale la pena señalar que los usuarios de IE solo lo verán abrirse y cerrarse.
Comencemos con el HTML, vamos a crear un botón para abrir el cuadro modal, este botón será un enlace para abrir el ID del cuadro modal.
El cuadro modal será un div y tendrá texto y otro enlace dentro.
Para comenzar, vamos a colocar y diseñar el cuadro modal, no necesitamos preocuparnos por el animación por ahora, hagamos que se vea como queremos en la página.
/*Position and set the opacity of the modal box*/
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
opacity: 0;
pointer-events: none;
/*Set the opacity transition will be used by older browsers that don't support 3D transforms*/
-webkit-transition:opacity 500ms ease-in;
-moz-transition:opacity 500ms ease-in;
-o-transition:opacity 500ms ease-in;
transition:opacity 500ms ease-in;
}
/*Styling the inner box of the modal box*/
.modal div {
width: 50%;
background: #fff;
position: relative;
margin: 10% auto;
box-shadow: 0px 2px 5px #222;
-moz-box-shadow: 0px 2px 5px #222;
-webkit-box-shadow: 0px 2px 5px #222;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#f2f2f2;
padding:25px;
/* Set the default animation*/
-webkit-animation:minimise 500ms linear;
-moz-animation:minimise 500ms linear;
-ms-animation:minimise 500ms linear;
-o-animation:minimise 500ms linear;
animation:minimise 500ms linear;
}
/*Style the header of the modal box*/
.modal h2 {
font-size: 2em;
padding:10px 0;
text-align:center;
}
/*Style the close button inside the box*/
.close{
text-align: center;
display:block;
color:#FF4444;
font-size:12px;
}
Eso es todo lo que necesitamos para crear el aspecto del caja modal como puede ver, hemos agregado una configuración de animación predeterminada de minimizar al div interior del cuadro modal. Crearemos esta configuración de animación más adelante en el tutorial.
Notará desde el botón de enlace y el botón de cierre que estamos enlazando a #abrir y #cerrar, lo que significa que esto irá a la URL, desde esta configuración podemos usar el :selector de destino para diseñar el cuadro modal.
Agregue lo siguiente al CSS para cambiar la animación predeterminada cuando haga clic en el botón Abrir.
.modal:target {
opacity: 1;
pointer-events: auto;
}
.modal:target > div {
-webkit-animation-name:bounce;
-moz-animation-name:bounce;
-ms-animation-name:bounce;
-o-animation-name:bounce;
animation-name:bounce;
}
Los estilos anteriores se aplicarán cuando hayamos hecho clic en el enlace abierto.
Ahora podemos crear el animación para el rebote y el minimizar el efecto.
Agregue lo siguiente a su archivo CSS para crear un efecto de rebote.
/*Setup the bounce animation*/
@-webkit-keyframes bounce {
0% {
/*transform*/
-webkit-transform:scale3d(0.1,0.1,1);
-moz-transform:scale3d(0.1,0.1,1);
-ms-transform:scale3d(0.1,0.1,1);
-o-transform:scale3d(0.1,0.1,1);
transform:scale3d(0.1,0.1,1);
-webkit-box-shadow:0 3px 20px rgba(0,0,0,0.9);
-moz-box-shadow:0 3px 20px rgba(0,0,0,0.9);
-ms-box-shadow:0 3px 20px rgba(0,0,0,0.9);
-o-box-shadow:0 3px 20px rgba(0,0,0,0.9);
box-shadow:0 3px 20px rgba(0,0,0,0.9);
}
55% {
-webkit-transform: scale3d(1.08,1.08,1);
-moz-transform: scale3d(1.08,1.08,1);
-ms-transform: scale3d(1.08,1.08,1);
-o-transform: scale3d(1.08,1.08,1);
transform: scale3d(1.08,1.08,1);
-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
-moz-box-shadow: 0 10px 20px rgba(0,0,0,0);
-ms-box-shadow: 0 10px 20px rgba(0,0,0,0);
-o-box-shadow: 0 10px 20px rgba(0,0,0,0);
box-shadow: 0 10px 20px rgba(0,0,0,0);
}
75% {
-webkit-transform: scale3d(0.95,0.95,1);
-moz-transform: scale3d(0.95,0.95,1);
-ms-transform: scale3d(0.95,0.95,1);
-o-transform: scale3d(0.95,0.95,1);
transform: scale3d(0.95,0.95,1);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
-ms-box-shadow: 0 0 20px rgba(0,0,0,0.9);
-o-box-shadow: 0 0 20px rgba(0,0,0,0.9);
box-shadow: 0 0 20px rgba(0,0,0,0.9);
}
100% {
-webkit-transform: scale3d(1,1,1);
-moz-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
-o-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-ms-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-o-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
}
}
Ahora el CSS minimiza la animación.
/*Setup the minimise animation*/
@-webkit-keyframes minimise {
0% {
-webkit-transform: scale3d(1,1,1);
-moz-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
-o-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
100% {
-webkit-transform: scale3d(0.1,0.1,1);
-moz-transform: scale3d(0.1,0.1,1);
-ms-transform: scale3d(0.1,0.1,1);
-o-transform: scale3d(0.1,0.1,1);
transform: scale3d(0.1,0.1,1);
}
}
Eso es todo. Mira la demostración y pruébalo.