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
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
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.
Page Layout With a Static Sidebar
With HD screens dominating and 4k gaining ground, more designers are starting to take 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
The “half by half” scrolling effect with this example adds a unique touch. It almost seems as if the cards and photos are alternately being 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.
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.
The concept here is really cool from a branding perspective. It uses a split screen within a page where you have 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.
Split Screen Hover Effects
So often we see beautiful split screen designs, but not much in the way of interactivity. The example below adds the missing ingredient with some basic scale transitions upon hovering. What’s nice about this is that it provides just that little extra visual cue to the user.
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.
The practice of scrolling down a page can get boring really quickly. It’s amazing we all don’t fall asleep in the process. Once in awhile it’s a good idea to bring something different to scrolling, like this split reveal effect. The animation adds a little personality and excitement to the experience. It may even help to entice visitors to further engage with your site.
Splitting’s the Difference
What started out 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 Common Website Layouts Built with CSS Grid
- 10 Examples of Unorthodox Shapes Created with CSS
- Spread the Word: Beautiful Testimonial UI Examples
- 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
- Better Layouts Through CSS Flexbox