Con HTML5 y CSS3 se pueden realizar animaciones, controlar elementos,… En este artículo veremos cómo controlar elementos como «divs» (se puede controlar cualquier elemento HTML) con checkboxes. En este caso haremos que un contenedor ubicado fuera de la pantalla aparezca. Las opciones son infinitas, con un poco de imaginación podrás hacer multitud de efectos.
Veamos el HTML:
<div class="container">
<p>Si pulsamos sobre el checkbox veremos como sale un div de la parte derecha de la pantalla.</p>
<p>Si volvemos a pulsar sobre él, o sobre cerrar dentro del div, el contenedor se enconderá</p>
<input type="checkbox" id="control-div">
<label for="control-div">Controlar div</label>
<div class="container-animacion">
<p>div a controlar</p>
<label for="control-div">Cerrar</label>
</div>
</div>
Hemos creado un checkbox y asociado a un label. Después hemos creado el contenedor con el que queremos interactuar. Este contenedor, parq eu funcione, tiene que estar siempre, o bien al mismo nivel (ser hermano), o estar por debajo (ser hijo) del propio checkbox.
Truco: El checkbox puedes cambiarlo de sitio, siempre y cuando tenga un label asociado y el contenedor a animar sea hermano o hijo. El label puede estar en cualquier sitio del código siempre y cuando esté asociado al checkbox en cuestión.
Veamos el CSS:
.container-animacion{
position: fixed;
width: 150px;
top:0;
right: -160px;
bottom: 0;
background: orange;
transition:0.2s ease;
}
#control-div:checked ~ .container-animacion{
right: 0
}
Simplemente le damos estilos al contenedor y lo ubicamos fuera de la pantalla. Posteriormente decimos que si el checkbox con id «control-div» está «checked» el hermano (~) con clase «container-animacion» tenga un «right:0».
Los selectores que se suelen utilizar (sin ellos no funciona) son:
- ~ : hermano
- > : Hijo
Os dejo aquí la demostración.
