How to Create a Split-Screen Slider With JavaScript

How to Create a Split-Screen Slider With JavaScript


In right now’s video tutorial I’m going to indicate you the right way to create a “split-screen” slider component (or UI, no matter you like to name it) utilizing JavaScript. Inspiration for this got here from a web page on the Corsair web site; let’s see how we are able to construct one for our personal tasks.

What We’re Going to Construct

Let’s first check out a demo of what we’re constructing. View the mission on CodePen, or seize the supply information from GitHub.

Watch the Screencast

1. Construct Your Panels

So how is that this achieved? Start by constructing two separate panels in your HTML markup. I’ve used two div parts with a category of panel. The primary has a further class of backside, the opposite a further class of high. Each comprises one other div to wrap the contents.

Put no matter contents you want (pictures, headings and many others.) throughout the content material divs.

With these achieved, add a brand new div, earlier than the closing splitview tag to behave as a deal with.

2. Add Some Types to Stack the Panels

The primary necessary types will stack our two panels on high of each other, ensuring that they’re fluid too.

Fashion every particular person panel–high and backside–otherwise, akin to giving them differingbackground-color, and magnificence the contents inside them nevertheless you please. One factor to notice is the z-index of every, to verify they stack within the right order.

3. Apply a Easy Masks

We now have our high panel utterly protecting the one beneath, so let’s experiment by decreasing its width:

It’s best to discover you now have one thing like this, with the highest panel solely reaching the center (50vw) of the web page:

4. Kicking Off the JavaScript

Now that we’ve issues labored out with CSS, let’s flip to JavaScript and see if we are able to animate this sliding masks impact. We’ll start by asking the browser to execute a perform, however solely as soon as the DOM has loaded:

The remainder of our code will go inside this perform, between the curly braces.

Subsequent we’ll assign some variables by fetching the guardian component, the highest panel (particularly the one one we’ll be altering), and the deal with component.

5. Constructing the Deal with

Earlier than we go any additional, let’s fashion the deal with.

It’s a 5px large yellow bar, operating the peak of the container and positioned within the middle of the viewport. It has a z-index of three to verify it sits on high.

Make it Transfer

We need to seize the x coordinates of the mouse cursor each time we transfer it throughout the viewport. We then need to transfer the deal with and set the width of the highest panel based on these coordinates.

We start with an occasion listener on the guardian component, after which set the left fashion property of the deal with as being equal to the occasion.clientX worth.

That takes care of our shifting deal with, let’s now resize the panel, once more making it equal to occasion.clientX.

We’re Executed!

Nicely achieved for reaching the tip; with that comparatively simple CSS and JavaScript we’ve created an excellent split-screen sliding masks impact. To take it additional, as I do within the video, we are able to skew the deal with too–take a look at the demo on CodePen to see the way it’s achieved!


We will be happy to hear your thoughts

Leave a reply

Enable registration in settings - general