Cómo Crear un Slider de Pantalla Dividida con JavaScript

Spanish (Español) translation by Alfonso Mora (you can also view the original English article)

En video tutorial de hoy voy a mostrar cómo crear un elemento Slider de "pantalla dividida" (o UI, lo que usted prefiere llamarlo) utilizando JavaScript. Inspiración para este vino de una página en el Sitio Web de Corsair; vamos a ver cómo podemos construir uno para nuestros propios proyectos.

Lo que Vamos a Construir

Primero echemos un vistazo a una demo de lo que estamos construyendo. Abra el proyecto CodePen, o agarrar los archivos de código fuente en GitHub.

Please accept marketing cookies to load this content.

Ver el Screencast

1. Construir los Paneles

¿Cómo se hace esto? Comenzar con la construcción de dos paneles separados en su código HTML. He utilizado dos elementos div con una clase de panel. La primera tiene una clase adicional bottom, el otro una clase adicional top. Cada uno contiene otro div para envolver el contenido.

<div class="splitview">
    <div class="panel bottom">
        <div class="content">
        
        </div>
    </div>   
    <div class="panel top">
        <div class="content">
        
        </div>
    </div>    
</div>        

Poner lo que te gustes en el contenido (imágenes, títulos, etc.) dentro del div content.

Con los hecho, añadir un div nuevo, antes de cerrar lo etiquetamos splitview para actuar como un palanca.

1	<div class="handle"></div>

2. Agregar Algunos Estilos para Apilar a los Paneles

Los primeros estilos importantes acumulará nuestros dos paneles uno encima del otro, asegurándose que estén fluido también.

/* Panels. */
.splitview {
    position: relative;
    width: 100%;
    min-height: 45vw;
    overflow: hidden;
}

.panel {
    position: absolute;
    width: 100vw;
    min-height: 45vw;
    overflow: hidden;
}

Cada panel individual –top y bottom – diferenciamos dándoles diferentes color con background-color, del estilo y estilo los contenidos dentro de ellos, sin embargo, por favor. Una cosa a destacar es el z-index de cada uno, para asegurarse de que la pila en el orden correcto.

.bottom {
    background-color: rgb(44, 44, 44);
    z-index: 1;
}

.top {
    background-color: rgb(77, 69, 173);
    z-index: 2;
}

3. Aplicar una Simple Mascarilla

Tenemos ahora nuestro panel superior cubriendo por completo el uno debajo, así que vamos a experimentar reduciendo su anchura:

.top {
    background-color: rgb(77, 69, 173);
    z-index: 2;
    width: 50vw;
}

Usted debe encontrar que algo como esto, tienes ahora con el panel superior sólo llegar a la mitad (50vw) de la página:

4. Lanzando el JavaScript

Ahora que ya tenemos listo los CSS, vamos a recurrir a JavaScript y ver si podemos animar este desplazamiento efecto máscara. Empezaremos haciendo el navegador para ejecutar una función, pero sólo una vez ha cargado el DOM:

1	document.addEventListener('DOMContentLoaded', function() {
2
3	});

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

A continuación asignaremos algunas variables por traer al elemento padre, el panel superior (es decir, el único que va cambiando) y el elemento manija.

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

5. Construcción de la Manija

Antes de continuar, vamos al estilo de la manija.

/* Handle. */
.handle {
    height: 100%;
    position: absolute;
    display: block;
    background-color: rgb(253, 171, 0);
    width: 5px;
    top: 0;
    left: 50%;
    z-index: 3;
}

Es un barra 5px de ancho amarillo, funcionando a la altura del contenedor y colocados en el centro de la ventanilla. Tiene un z-index de 3 para asegurarse de que se este en la parte superior.

Hacen que se Mueva

Queremos tomar las coordenadas x del cursor del ratón cada vez que nos movemos dentro de la vista. Entonces queremos mover la manija y establecer el ancho del panel superior según esas coordenadas.

Empezamos con un detector de eventos en el elemento primario y luego establezca la propiedad estilo left del mango igual al valor event.clientX.

1	parent.addEventListener('mousemove', function(event) {
2	// Move the handle.
3	handle.style.left = event.clientX + 'px';
4	});

Que se encarga de nuestro mango móvil, vamos a cambiar ahora el panel, otra vez haciéndolo igual a event.clientX.

parent.addEventListener('mousemove', function(event) {
        // Move the handle.
        handle.style.left = event.clientX + 'px';

        // Adjust the top panel width.
        topPanel.style.width = event.clientX + 'px';
});

¡Hemos Terminado!

Bien hecho para alcanzar el fin; con eso relativamente sencillo CSS y JavaScript hemos creado un brillante efecto de máscara deslizante pantalla dividida. Para llevarlo más lejos, como hago en el video, podemos inclinar el mango demasiado – Mira la demo en CodePen para ver cómo se logra!