Si eres tan viejo como yo, quizás recuerdes haber visto Let’s Make a Deal en las viejas ondas de televisión. Aparentemente, el programa todavía está en estos días en un nuevo formato, pero el original siempre me llamó la atención por una cosa simple: la revelación.
Hay algo emocionante en no saber qué hay detrás de un juego de cortinas y de eso se trata Let’s Make a Deal. Los concursantes podían elegir entre tres puertas, cualquiera de las cuales se abría para revelar un premio.
¡Fue emocionante!
Esa técnica de abrir las cortinas para revelar un tesoro (incluso si se trata de un certificado de regalo de Bob’s Big Boy) es una pequeña táctica ingeniosa que podemos usar nosotros mismos con un poco de CSS. Aquí está la demostración final:
Vea el Pen OXJMmY de Geoff Graham (@geoffgraham) en CodePen.
el html
Esto básicamente se reduce a tres elementos:
- El envoltorio de la cortina
- Panel de cortina izquierdo
- Panel de cortina derecho
Podemos visualizar lo que estamos haciendo en un diagrama:
…y cuando los paneles de la cortina se abran, revelarán un premio como cuarto elemento:
Usemos eso como modelo para nuestro HTML.
<!-- The parent component -->
<div class="curtain">
<!-- The component wrapper -->
<div class="curtain__wrapper">
<!-- The left curtain panel -->
<div class="curtain__panel curtain__panel--left">
</div> <!-- curtain__panel -->
<!-- The prize behind the curtain panels -->
<div class="curtain__prize">
</div> <!-- curtain__prize -->
<!-- The right curtain panel -->
<div class="curtain__panel curtain__panel--right">
</div> <!-- curtain__panel -->
</div> <!-- curtain__wrapper -->
</div> <!-- curtain -->El diseño CSS
Ahora que tenemos nuestros elementos definidos en el HTML, podemos comenzar a posicionarlos con CSS.
Nuestro primer objetivo es colocar los paneles de la cortina de manera que no solo queden uno al lado del otro, sino también frente al premio mismo.
.curtain {
width: 100%; /* Ensures the component is the full screen width */
height: 100vh; /* We're using this for demo purposes */
overflow: hidden; /* Allows us to slide the panels outside the container without them showing */
}
.curtain__wrapper {
width: 100%;
height: 100%;
}
.curtain__panel {
background: orange;
width: 50%; /* Each panel takes up half the container */
height: 100vh; /* Used for demo purposes */
float: left; /* Makes sure panels are side-by-side */
position: relative; /* Needed to define the z-index */
z-index: 2; /* Places the panels in front of the prize */
}
.curtain__panel--left {
/* Styles for sliding the left panel */
}
.curtain__panel--right {
/* Styles for sliding the right panel */
}
.curtain__prize {
background: #333;
position: absolute; /* Forces the prize position into the container start */
z-index: 1; /* Places the prize behind the panels, which are z-index 2 */
width: 100%;
height: 100%;
}Podría parecer que no hemos hecho casi nada si nos detuviéramos aquí y comprobáramos nuestro trabajo. De hecho, solo estamos viendo un bloque naranja.
Vea el Pen wWvJaO de Geoff Graham (@geoffgraham) en CodePen.
¡Ésto es una cosa buena! En realidad, estamos viendo dos paneles de cortinas que ocupan todo el contenedor de cortinas con un panel para un premio que acecha detrás de escena.
El truco de la casilla de verificación
Sería negligente ignorar el hecho de que vamos a poner en práctica el truco de la casilla de verificación aquí. El truco de la casilla de verificación, en caso de que no esté familiarizado, es un método en el que podemos cambiar la presentación de los elementos en función del estado conocido de una casilla de verificación de formulario simple. Tenemos un artículo sobre el método en caso de que quieras profundizar en cómo funciona.
La primera regla para usar el truco de la casilla de verificación es que necesitamos una casilla de verificación en nuestro marcado. Agreguemos eso en el HTML:
<!-- The parent component -->
<div class="curtain">
<!-- The component wrapper -->
<div class="curtain__wrapper">
<!-- The checkbox hack! -->
<input type="checkbox" checked>
<!-- The left curtain panel -->
<div class="curtain__panel curtain__panel--left">
</div> <!-- curtain__panel -->
<!-- The prize behind the curtain panels -->
<div class="curtain__prize">
</div> <!-- curtain__prize -->
<!-- The right curtain panel -->
<div class="curtain__panel curtain__panel--right">
</div> <!-- curtain__panel -->
</div> <!-- curtain__wrapper -->
</div> <!-- curtain -->Primero, asegurémonos de que nuestra casilla de verificación sea invisible y ocupe todo el espacio de nuestro componente de cortina. Queremos que se pueda hacer clic en toda la cortina y esto nos permitirá hacer precisamente eso.
input[type=checkbox] {
position: absolute; /* Force the checkbox at the start of the container */
cursor: pointer; /* Indicate the curtain is clickable */
width: 100%; /* The checkbox is as wide as the component */
height: 100%; /* The checkbox is as tall as the component */
z-index: 100; /* Make sure the checkbox is on top of everything else */
opacity: 0; /* Hide the checkbox */
}Observe que el estado predeterminado de la casilla de verificación es checked en nuestro HTML. Esto nos permite diseñar nuestros elementos basados en el :checked Expresar.
/* When the checkbox is checked... */
/* Slide the first panel in */
input[type=checkbox]:checked ~ div.curtain__panel--left {
transform: translateX(0);
}
/* Slide the second panel in */
input[type=checkbox]:checked ~ div.curtain__panel--right {
transform: translateX(0);
}Esto también significa que podemos actualizar nuestros paneles de cortina para que se deslicen fuera del contenedor cuando la casilla de verificación no está marcada.
/* Slide the panel to the left out of the container */
.curtain__panel--left {
transform: translateX(-100%);
}
/* Slide the panel to the right out of the container */
.curtain__panel--right {
transform: translateX(100%);
}¡Ahora estamos en algo! Al hacer clic en el componente de la cortina, se mueven los paneles fuera de la pantalla y se revela el panel de premios.
Vea Pen xOxqOL de Geoff Graham (@geoffgraham) en CodePen.
Animando el cambio
A continuación, debemos animar la transición de los paneles una vez que se haya cambiado el estado de la casilla de verificación al hacer clic. De lo contrario, como habrás notado, el cambio se parece menos a una puerta corredera y más a un abrir y cerrar de ojos.
Agreguemos un transition al .curtain__panel clase:
.curtain__panel {
background: orange;
width: 50%; /* Each panel takes up half the container */
height: 100vh; /* Used for demo purposes */
float: left; /* Makes sure panels are side-by-side */
position: relative; /* Needed to define the z-index */
z-index: 2; /* Places the panels in front of the prize */
transition: all 1s ease-out; /* Animates the sliding transition */
}¿Qué tan geniales somos?
Vea el Pen aZbJBw de Geoff Graham (@geoffgraham) en CodePen.
Reuniéndolo todo
Ahora que tenemos todos los elementos de trabajo en su lugar, podemos comenzar a ajustar las cosas agregando contenido a la cortina y los paneles de premios.
Vea el Pen OXJMmY de Geoff Graham (@geoffgraham) en CodePen.