Cómo crear un control deslizante de pantalla dividida con JavaScript

En el video tutorial de hoy, te mostraré cómo crear un elemento deslizante de "pantalla dividida" (o IU, como prefieras llamarlo) usando JavaScript. La inspiración para esto vino de una página en el sitio web de Corsair; Veamos cómo podemos construir uno para nuestros propios proyectos..

Lo que vamos a construir

Veamos primero una demostración de lo que estamos construyendo. Vea el proyecto en CodePen, o tome los archivos de origen de GitHub.

Mira el Screencast

1. Construye tus paneles

Entonces, ¿cómo se hace esto? Comience por construir dos paneles separados en su marca HTML. He usado dos div elementos con una clase de panel. El primero tiene una clase adicional de fondo, el otro una clase adicional de parte superior. Cada uno contiene otro div para envolver los contenidos.

Coloque cualquier contenido que desee (imágenes, encabezados, etc.) dentro de la contenido divs.

Con los hechos, añade un nuevo. div, antes del cierre vista dividida etiqueta para actuar como un mango.

2. Agrega algunos estilos para apilar los paneles

Los primeros estilos importantes apilarán nuestros dos paneles uno encima del otro, asegurándose de que también sean fluidos.

/ * Paneles. * / .splitview posición: relativo; ancho: 100%; min-height: 45vw; desbordamiento: oculto;  .panel posición: absoluta; ancho: 100vw; min-height: 45vw; desbordamiento: oculto; 

Estilo de cada panel individual-parte superior y fondo-diferente, como darles diferentescolor de fondo, y estiliza el contenido dentro de ellos como te plazca. Una cosa a tener en cuenta es el índice z de cada uno, para asegurarse de que se apilen en el orden correcto.

.inferior color de fondo: rgb (44, 44, 44); índice z: 1;  .top background-color: rgb (77, 69, 173); índice z: 2; 

3. Aplicar una máscara simple

Ahora tenemos nuestro panel superior cubriendo completamente el de abajo, así que experimentemos reduciendo su ancho:

.arriba color de fondo: rgb (77, 69, 173); índice z: 2; ancho: 50vw; 

Debería encontrar que ahora tiene algo como esto, con el panel superior solo llegando al medio (50vw) de la página:

4. Poniendo en marcha el JavaScript

Ahora que hemos trabajado con CSS, pasemos a JavaScript y veamos si podemos animar este efecto de máscara deslizante. Comenzaremos pidiéndole al navegador que ejecute una función, pero solo una vez que el DOM se haya cargado:

document.addEventListener ('DOMContentLoaded', function () );

El resto de nuestro código irá dentro de esta función, entre las llaves..

A continuación, asignaremos algunas variables extrayendo el elemento principal, el panel superior (es decir, el único que cambiaremos) y el elemento de control..

 var parent = document.querySelector ('. splitview'), topPanel = parent.querySelector ('. top'), handle = parent.querySelector ('. handle'),

5. Construyendo el mango

Antes de seguir adelante, vamos a diseñar el mango.

/* Encargarse de. * / .handle altura: 100%; posición: absoluta; bloqueo de pantalla; color de fondo: rgb (253, 171, 0); ancho: 5px; arriba: 0; izquierda: 50%; índice z: 3; 

Es una barra amarilla de 5 píxeles de ancho, que corre a la altura del contenedor y se coloca en el centro de la ventana gráfica. Tiene un índice z de 3 para asegurarse de que se sienta en la parte superior.

Hacer que se mueva

Queremos capturar las coordenadas x del cursor del mouse cada vez que lo movemos dentro de la ventana gráfica. Luego queremos mover la manija y establecer el ancho del panel superior de acuerdo con esas coordenadas.

Comenzamos con un detector de eventos en el elemento principal y luego configuramos izquierda propiedad de estilo del mango como igual a la evento.clienteX valor.

parent.addEventListener ('mousemove', function (event) // Mueve el manejador. handle.style.left = event.clientX + 'px';);

Eso se ocupa de nuestro controlador en movimiento, ahora redimensionemos el panel, de nuevo haciéndolo igual a evento.clienteX.

parent.addEventListener ('mousemove', function (event) // Mueve el controlador. handle.style.left = event.clientX + 'px'; // Ajusta el ancho del panel superior. topPanel.style.width = event.clientX + 'px';);

Estamos hechos!

Bien hecho por llegar al final; Con ese CSS y JavaScript relativamente sencillos, hemos creado un brillante efecto de máscara deslizante en pantalla dividida. Para ir más lejos, como lo hago en el video, también podemos inclinar la manija - echa un vistazo a la demostración en CodePen para ver cómo se logra!