Ready to bring a new dimension to your web experiences? Get creative with horizontal scroll.
Most websites offer a top-down means of navigation; vertical scrolling is something that we’re used to and don’t even think about as we move down through a web page. But vertical scrolling isn’t the only way to structure a website.
Horizontal scrolling websites are an easy way to inject novel movement and visual breaks into your content—making them a particularly great choice for long-form articles.
We’ve pulled together some inventive horizontal scrolling website ideas to showcase the versatility of this simple web design trick.
Horizontal scroll is a navigation technique for exploring web content. Instead of moving through a website page vertically from top to bottom, horizontal scroll takes your readers through a left-to-right experience—magically, text and visuals move sideways.
Horizontal scrolling’s power comes through offering a fresh and unconventional user experience. Instead of navigating through a website on autopilot, your readers’ attention stays on the content before them—they keep scrolling from left to right to reveal more and more.
[image/graphic relating to above]
When you give your audience something that they’re not expecting it can go a long way in capturing their attention.
Horizontal scrolling opens up a variety of creative possibilities. It can be utilized for an entire website’s design, but can also be used in smaller touches to showcase images or other content you want people to pay attention to.
We’d recommend experimenting with horizontal scrolling on just a few sections to play around with what’s possible. Here are a few ways you can use it to best effect:
One of a handful of "scrollytelling" techniques, horizontal scrolli is ideal for visual storytelling. We’re used to reading books, and moving from left to right feels natural. If you’re detailing a sequence of events, horizontal scrolling is an intuitive way of presenting this information.
Horizontal sections bring a sense of motion. Adding a bit of variety in how content is presented keeps your website from being a monotonous user experience.
Horizontal scrolling makes it easier to read through long-form content. Instead of a single lengthy scroll, horizontal sections are a dynamic way to cluster facts, communicate a timeline of events, show related images, or detail some other content that you want to bring attention to.
[image/graphic relating to above]
Now that we know a bit more about how to use horizontal scrolling, let’s take a look at the inventive ways web designers are putting it into practice. These websites showcase the power of taking things in a sideways direction.
What’s great about horizontal scrolling websites is that they’re unique. We haven’t seen them everywhere, and when we do come across one, we can’t help but take notice. Audento Digital takes a horizontal scrolling approach that makes a huge impression the moment you land on it.
This website unveils its content along with plenty of hover effects and other micro-interactions. This isn’t a design that’s an idle scroll. Rather, it’s packed with action and motion as you move from left to right.
Horizontal scroll isn’t just for long-form editorial. This website designed with Vev uses it to promote a unique campaign for trading appraised art for Polestar automobiles.
Most of this design is vertically navigated, but they utilize horizontal scrolling for break-out photo sections. Inching your way through this gallery shows off the beauty and sophistication of these vehicles. This horizontal scroll section not only echoes the premium feel of these high-end cars, but provides a nice bit of variety in navigating through this landing page.
The LA Artbox is a gallery and creation space focused on community. They fill this side-scrolling design with big bands of brilliant color, lively animations, and captivating hover effects. It has a hip and unconventional feel, and horizontal scrolling opens up this digital space in a way not possible with a traditional layout.
We’ve talked about Mirrows before in our blog, and we’re happy to bring them up again as we’re huge fans of what they’ve done with their Vev designed website. This sidescrolling design offers a mesmerizing user experience packed with visuals and creative typography. Geometric patterns rotate, text scrolls by, and animated visuals dance across its space. This design would be too much to navigate in a vertical space, with horizontal scrolling offering the perfect platform for its quirky sensibilities.
Landing on this website for the design event IAD Lab 2021 puts ribbons of text in front of you that bend and morph as you hover over them. This opening screen is enough to make this website one that you’ll want to check out, but there is so much more going on here that’s eye-catching and imaginative.
Parallax scrolling effects are usually the domain of vertically aligned websites but are used here horizontally. If you’re unfamiliar, parallax scrolling takes visuals and text and has them move at different speeds creating an illusion of depth. This side-scrolling design never feels flat and static, with a variety of parallax visuals that give it a sense of dimensionality.
This is something we put together while playing in Vev, taking the manual click-through carousel on SpaceX's original Falcon Heavy site and turning it into a seamless horizontal scroll experience to showcase the different rocket components. When you’re showcasing something with a clear sequence of events or complex elements like this, horizontal scrolling is a fantastic way to show what happens at every step.
With a playful color palette, paper textures, and parallax scrolling visuals, Sweet Little Things Shoppe does a great job of capturing the personality of its bakery. Each screen has something that pops from the screen, dazzling our eyes, and making us want to learn more about their delightful baked goods.
This side-scrolling design from Christo 1910 is a joyful user experience full of huge squares of color, gigantic type, and movement.
Scrolling through its horizontal expanse, text shifts and then rests in a static position. A cartoon cloud strolls on the bottom right-hand side of the screen. With this website being about Christo 1910’s shoe insoles, the themes of motion and walking are expressed so well in this horizontal stroll through their products.
Chaletbau Matti, a Swiss carpentry company, has a design as rich in visuals as they are in history.
A short distance down from the top brings you to a break-out section that moves you horizontally through a timeline marking the history of Chaletbau Matti. This is a smart way of utilizing horizontal scroll and works so well in telling their company’s story.
Web design makes it possible to tell stories in ways that just aren’t possible with traditional print. The United Nations Development Programme's 2022 Sustainable Development Plan communicates its aspirations through horizontally scrolling panels that are both artistic and informative.
Touches like organic textures, animated fish, and a gentle color palette, connect it to the natural world. Instead of this information being presented in a cold and sterile way, the warm illustrations draw us right into the content. This is a great example showing how well horizontal scrolling works in showing timelines of events.
Revere Insight wows us with a beautiful website designed with Vev full of dark backgrounds and glowing colors. There’s nothing that feels outdated, with the overall aesthetic feeling high-tech and forward-thinking. This design also strays from tradition with several horizontally scrolled sections that help communicate further who they are as an agency and how they help their clients.
Another example of the designs you achieve in Vev with no code, this fictional plant website uses a horizontal section to highlight customer testimonials. Injecting these kinds of sections into your sites is ideal when you want to present a group of themed points together in an exciting, visually distinct way—in this case, making sure that prospective customers don’t miss the kind words people are saying.
SomeFolk mixes up vertically scrolled content with horizontally scrolled sections for their agency website.
Showing off the work that you’ve done is one of the important objectives of an agency website. Most of the time, we see featured projects arranged in a static grid. Here they’re scrolled through horizontally just a short distance down from the top. This gallery is effective in making us focus on their work, instead of quickly scrolling past it. Using horizontal scrolling to showcase blocks of related content, like featured projects, is an effective way to make sure that people don’t miss it.
We built Vev to help creatives experiment with cutting-edge techniques like horizontal scroll free from technical limitations. This deep-dive video walks through exactly how to build your own horizontal scrolling website using pre-coded horizontal scroll components in Vev.