Como criar um controle deslizante de tela dividida com JavaScript

No tutorial em vídeo de hoje, mostrarei como criar um elemento deslizante de “tela dividida” (ou UI, como você preferir chamar) usando JavaScript. A inspiração para isso veio de uma página no site da Corsair; vamos ver como podemos construir um para nossos próprios projetos.

O que vamos construir

Vamos primeiro dar uma olhada em uma demonstração do que estamos construindo. Visualize o projeto no CodePen ou pegue os arquivos de origem do GitHub.

Assista ao Screencast

1. Construa seus painéis

Então, como isso é feito? Comece criando dois painéis separados em sua marcação HTML. eu usei dois div elementos com uma classe de panel. O primeiro tem uma classe adicional de bottomo outro uma classe adicional de top. Cada um contém outro div para embrulhar o conteúdo.

Coloque o conteúdo que quiser (imagens, títulos, etc.) content divs.

Feito isso, adicione um novo divantes do fechamento splitview tag para atuar como um identificador.

2. Adicione alguns estilos para empilhar os painéis

Os primeiros estilos importantes empilharão nossos dois painéis um em cima do outro, certificando-se de que eles também sejam fluidos.

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

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

Estilize cada painel individual–top e bottom–diferente, como dar-lhes diferentesbackground-color, e estilize o conteúdo dentro deles como quiser. Uma coisa a notar é o z-index de cada um, para garantir que eles empilhem na ordem correta.

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

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

3. Aplique uma máscara simples

Agora temos nosso painel superior cobrindo completamente o inferior, então vamos experimentar reduzindo sua largura:

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

Você deve descobrir que agora tem algo assim, com o painel superior atingindo apenas o meio (50vw) da página:

4. Iniciando o JavaScript

Agora que temos as coisas resolvidas com CSS, vamos voltar ao JavaScript e ver se podemos animar esse efeito de máscara deslizante. Começaremos pedindo ao navegador para executar uma função, mas apenas depois que o DOM for carregado:

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

O resto do nosso código irá dentro desta função, entre as chaves.

Em seguida, atribuiremos algumas variáveis ​​buscando o elemento pai, o painel superior (ou seja, o único que vamos alterar) e o elemento handle.

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

5. Construindo a alça

Antes de prosseguirmos, vamos estilizar a alça.

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

É uma barra amarela de 5px de largura, correndo na altura do container e colocada no centro da viewport. Tem um z-index de 3 para se certificar de que fica em cima.

Faça-o mover

Queremos pegar as coordenadas x do cursor do mouse sempre que o movermos dentro da viewport. Em seguida, queremos mover a alça e definir a largura do painel superior de acordo com essas coordenadas.

Começamos com um ouvinte de evento no elemento pai e, em seguida, definimos o left propriedade de estilo do identificador como sendo igual ao event.clientX valor.

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

Isso cuida da nossa alça móvel, vamos agora redimensionar o painel, tornando-o novamente 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';
});

Foram realizadas!

Bem feito para chegar ao fim; com esse CSS e JavaScript relativamente simples, criamos um efeito brilhante de máscara deslizante de tela dividida. Para ir mais longe, como faço no vídeo, também podemos distorcer a alça – confira a demonstração no CodePen para ver como isso é alcançado!