This article will focus on the use of JavaScript to create a split-screen UI, as mentioned in the previous article on 10 unique CSS background visuals. This split-screen visual effect is also widely used on websites, such as the Corsair website.

HTML structure

To do this, you need to use divs to build two panels. The first is assigned to the bottom class and the other to the top class. Then wrap it with a class called SplitView.

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

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

        </div>
    </div>    
</div>
Copy the code

The content area is content where you can put anything, images, text, etc.

We then add a div class named Handle to the splitView structure to enhance the visual representation of the split screen.

<div class="handle"></div>
Copy the code

style

First, write the styles of the two panels. To achieve this effect, you need to use absolute positioning, so make sure the panel with the class name top is on top of the other panel. The other thing is that in order to be able to adapt the screen size of the device, we use vw.

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

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

To distinguish the two panels, give them different background colors. To ensure that top is on top of another panel, ensure that the z-index of top is larger than that of the other panel.

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

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

To achieve the split-screen effect described above, you need to set the width of a panel to half of the full width, resulting in the following effect:

JavaScript

Now that the UI is complete, it’s time to use JavaScript to implement the split-screen interaction. Define a function to execute when the DOM is loaded:

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

});
Copy the code

Next, define some basic variables that need to be manipulated, such as Panel, Handel, etc.

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

Custom handle…

Handle is designed to enhance the visual presentation of split screens.

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

In order to enhance the visual performance of split screen, handle is a yellow line 5px wide, the height is the same as the height of the content area, and z-index is 3 to ensure that it is above the two panels.

Move the handle…

By listening for mouse events as you move the mouse over the view, you can obtain the mouse coordinate value, event.clientx, such as the left value. We then assign the value to Handle’s left so that handle moves with the mouse.

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

In order to achieve the split-screen effect of moving with the mouse, it is also necessary to dynamically change the value of the panel. The width of the panel is changed according to the coordinate value of mouse movement in real time, that is, the width of the panel is equal to the value of mouse movement 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';
});
Copy the code

conclusion

A simple split screen visual effect is done. You can also use styles to change the visual rendering. For example, here I used transform in CSS to render a split screen with a diagonal cut. The detailed code can be found here, at the demo address.

This article is mainly from How to Create a split-screen Slider With JavaScript this article collated from, there are omissions, omissions or understanding of the place is not in place, but also please give more advice!