Split-screen UIs have become a popular way to showcase content. We often think of them as being utilized in areas where we want users to choose between two options. But we’re also seeing other creative uses of the technique.
For example, a split-screen can also be used to great effect as a full-page layout or even as a transitional animation.
Here are 10 examples of split-screen UIs, complete with source code that you can edit to fit your needs. Each has something unique to offer.
Making a Choice by Bridget Reed
This is certainly the most common way to use a split-screen. A website visitor is presented with two options. Here, the background image colors help provide nice separation, while the rounded logo in the middle ties everything together.
Splitting Up a Slider by Fabio Ottaviani
A split-screen also makes for an interesting transitional effect, as we see with the slideshow example below. Scrolling down causes each half of the screen to split and reveal the next image in the queue. The result is a very smooth and high-end UI.
Split Page Layout With a Static Sidebar by Travis
With HD screens dominating and 4k gaining ground, more designers are taking advantage of that extra screen real estate. This example layout provides a static sidebar with a bold background image. But it also looks great on smaller screens, as that sidebar becomes a header. It’s both attractive and functional.
For Comparisons’ Sake by Envato
Alternating Gallery by Kseso
The “half by half” scrolling effect with this example adds a unique touch. It almost seems as if the cards and photos are alternately stacked on top of each other as you scroll. And since it uses less than 150 lines of pure CSS, load time shouldn’t be much of a concern.
Magazine Split-Layout by Brian Haferkamp
This layout emulates something you might find in a print magazine. The bold title and introductory text on the left provides terrific contrast with the photo and multicolumn article on the right. Overall, it makes for a very slick and professional look.
Split-Layout Services Overview by Luke Meyrick
The concept here is really cool from a branding perspective. It uses a split-screen within a page with a static branding message on the left, combined with a scrollable listing of services offered on the right. It’s just different and a way to stand out from the crowd a bit.
3D Carousel Split-Layout by Paul Noble
The transitions between slides in this carousel literally add a new dimension to split screens. Each slide “splits” in half as the next one is revealed in a cool 3D format. There’s a certain machine-like quality here that could be a great fit for an engineering or industrial firm.
Splitting’s the Difference
What started as a way to choose between A or B has become something more. Split layouts and animations are offering designers another creative avenue for encouraging interaction.
While we still see them in their traditional form, we also find that they are being used to enhance things like scrolling through content and image galleries. It’s even being used to mimic print design techniques.
Hopefully, the examples above will serve as an inspiration for ways you can add a split UI to your own projects. Have fun experimenting and implement features that both look great and add something unique to the mix.
- 8 CSS Grid & Flexbox Snippets for Creating Magazine Layouts
- 8 Snippets for Creating Common Website Layouts with CSS Grid
- How to Target Design Elements with the CSS :not Pseudo-Class
- 10 Examples of Unorthodox Shapes Created with CSS
- 8 Code Snippets That Demonstrate the Power of CSS Grid
- 10 Code Snippets for Creating Masonry Grid Layouts
- Fun Examples of CSS Imitating Print Design