1/16/2024 0 Comments Parallax css with skewed blockHopefully, the examples above will serve as an inspiration for ways you can add a split UI to your own projects. It’s even being used to mimic print design techniques. 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. Split layouts and animations are offering designers another creative avenue for encouraging interaction. What started as a way to choose between A or B has become something more. See the Pen Split 3D Carousel by Paul Noble Splitting’s the Difference There’s a certain machine-like quality here that could be a great fit for an engineering or industrial firm. Each slide “splits” in half as the next one is revealed in a cool 3D format. The transitions between slides in this carousel literally add a new dimension to split screens. See the Pen by Luke Meyrick 3D Carousel Split-Layout by Paul Noble It’s just different and a way to stand out from the crowd a bit. 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. The concept here is really cool from a branding perspective. See the Pen Personal Profile // Keanu Reeves by Brian Haferkamp Split-Layout Services Overview by Luke Meyrick Overall, it makes for a very slick and professional look. The bold title and introductory text on the left provides terrific contrast with the photo and multicolumn article on the right. This layout emulates something you might find in a print magazine. See the Pen Scrolling half by half pure #CSS by by Kseso Magazine Split-Layout by Brian Haferkamp And since it uses less than 150 lines of pure CSS, load time shouldn’t be much of a concern. It almost seems as if the cards and photos are alternately stacked on top of each other as you scroll. The “half by half” scrolling effect with this example adds a unique touch. See the Pen Split-Screen UI by Envato Tuts+ Alternating Gallery by Kseso Utilizing just a little bit of JavaScript, this UI is an interesting twist on the technique. Here we have a setup that allows users to simply move their mouse to see the differences between two images. See the Pen Split screen layout by Travis For Comparisons’ Sake by EnvatoĪnother trend gaining traction is utilizing the split-screen to compare “before” and “after” images. But it also looks great on smaller screens, as that sidebar becomes a header. This example layout provides a static sidebar with a bold background image. With HD screens dominating and 4k gaining ground, more designers are taking advantage of that extra screen real estate. See the Pen Split Slick Slideshow by Fabio Ottaviani Split Page Layout With a Static Sidebar by Travis The result is a very smooth and high-end UI. Scrolling down causes each half of the screen to split and reveal the next image in the queue. See the Pen Website – Split Screen by Bridget Reed Splitting Up a Slider by Fabio OttavianiĪ split-screen also makes for an interesting transitional effect, as we see with the slideshow example below. Here, the background image colors help provide nice separation, while the rounded logo in the middle ties everything together. A website visitor is presented with two options. This is certainly the most common way to use a split-screen. Split-Layout Services Overview by Luke Meyrick.Magazine Split-Layout by Brian Haferkamp.Split Page Layout With a Static Sidebar by Travis.Splitting Up a Slider by Fabio Ottaviani.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |