The Rise of the Horizontal Scroll Website

Innovative, memorable, and engaging — a horizontal scroll website is one of the best ways to make your brand stand out from the crowd.

With over 1 billion websites currently online (that’s more websites than cats on Earth!), it’s becoming harder and harder to compete for the attention of an increasingly discerning and unfocused audience. Having a unique and immersive web design is the best way to make sure users don’t only enjoy using your site, but remember it too — and a horizontal scroll website is a great way to bring a new dimension to your content.

Read on to learn more about what horizontal scrolling is, get familiar with some inspiring examples, and understand the best practices for using it. We’ll also break down how you can build your own slick horizontal scroll website without coding a thing in Vev.

What is a Horizontal Scroll Website?

Horizontal scroll websites are sites that offer a left-to-right scrolling navigation, deviating from the normal top-down vertical scrolling experience. All page content — whether text, photos, videos, or graphics — all move sideways, creating an unconventional user experience that sticks in the mind.

Horizontal scrolling isn’t exactly new. Back in 2002, it was considered one of the worst web design mistakes – but today things are quite different. The fact that so many people are used to swiping right on their devices might have played a part in horizontal scrolling’s comeback. It may just be that more than two decades later, people are simply more open to unusual web experiences that are distinctive and memorable.

A well-designed horizontal scroll website is an easy and effective way to pique users’ interests and add novel movement and visual breaks to your site. Rather than scrolling down on autopilot, readers become instantly more engaged in the content.

Types of Horizontal Scroll Websites

The beauty of horizontal scroll websites isn’t just that they can provide a refreshingly different interactive experience; it’s also that they’re versatile, and can be used in different ways. While often horizontal scrolling is used to supplement vertical web experiences, you can go all-out and build entirely horizontal scrolling websites. If you’re looking to subvert user expectations and capture attention, then a horizontal scroll website can be a great way to do this.

Horizontal scrolling is also an effective scrollytelling technique, so if you’re big on visual storytelling, or are interested in creating long-form content, a horizontal scroll site might be the way forward. Because we’re used to moving our focus from left to right when reading, it can seem like a natural approach for digital storytelling–particularly if you’re telling stories that are based around timelines or processes.

If you don’t want to create a full horizontal scroll website, you can add horizontal scrolling sections to an otherwise vertical scrolling site. This is popular with ecommerce websites, as it’s a great way to showcase different categories of content, and to divide a catalog into product types. A good example of this type can be seen on Netflix, where genre carousels are powered by horizontal scroll.

This technique also introduces visual breaks and brings a sense of motion to your site. Mixing up the ways in which your content is presented means the user experience will never be monotonous or static, and it helps highlight the content you want to bring special attention to.

Alternatively, some sites use horizontal scrolling to help users navigate a large visual element that may otherwise be too big for the page, or take up too much room. Take timelines, for example. Stretched-out visualizations like these can present real design challenges on vertical scroll websites,  but because horizontal scrolling is so effective at showing chronological events, it can better communicate your story.

Best Practices for Horizontal Scroll Websites

While horizontal scroll websites are becoming increasingly popular, it’s important to ensure you’re using this web design technique in the right way. If you think horizontal scrolling has a place on your site, you should keep a few best practices in mind for a solid user experience.

Include Navigational Cues

One of the most important things to do is to make the horizontal scroll option visually obvious. There’s no point working on some innovative long-form content if readers might miss it! Similarly, if you’re using horizontal scroll to showcase different categories, whether that’s photo galleries, portfolios, or featured products, make sure readers actually see all the examples.

There are several ways to do this. You can add button indicators like arrows, include a horizontal scrollbar, or make sure a section of hidden scrollable content is clearly visible. You can also add clear instructional text, like “scroll right for more”. No matter how slick your horizontal scroll website is, it’s key to remember that this is still an unconventional interaction, so navigational cues are a must.

Be Purposeful

You should also be smart and selective when you use horizontal scroll — unless you’re going ahead with a full horizontal scroll website. Use it to give your content structure, to present facts or events in a dynamic way, or to spotlight content or products you want to emphasize. You can also use it to create the illusion of a shorter page, which doesn’t only save vertical screen space, but stops readers from feeling overwhelmed.

Follow Platform Guidelines

When using no-code web creation platforms, there are set rules you will need to follow to make your horizontal scroll website function perfectly. We have a few best practices you should follow when adding our pre-built horizontal scrolling sections to your project. Learn more about how to add, style and organize your horizontal scroll sections here.

6 Horizontal Scroll Website Examples

Now that we know a bit more about horizontal scrolling and the different ways it can be utilized, let’s take a look at some of the most inventive and dynamic examples out there.

Mirrows

If you’re intrigued by the idea of an entirely horizontal scroll website then feast your eyes on Mirrows, a dual-state NFT art website made in Vev. Shunning vertical scroll altogether is a bold move, but in this case, it absolutely pays off, and effectively showcases how Mirrows combines artistic expressions with interactivity.

Landing on this website instantly tells the reader that Mirrows isn’t afraid to push the boundaries of web design — a fact that, in the emerging and creative field of NFTs, will surely go down well. There’s no risk of readers missing the horizontal scroll, as it’s triggered by scrolling vertically, but what unfolds is realms away from a typical user experience.

As the reader scrolls, the website springs into life, with quirky visuals, micro-interactions, and creative typography beginning to dance across the screen. Geometric patterns gyrate, a ballerina toy rotates, hidden text is revealed, and marquees of text scroll vertically. Shying away from color and keeping things black and white stops the site from looking overdone, but ensures it sticks in the mind.

North Sea

We’ve already looked at how effective horizontal scrolling can be for certain aspects of digital storytelling, particularly when it comes to depicting chronological events. An excellent example of this can be seen in the Vev-built site about the Norwegian film North Sea.

This is a disaster film about an enormous oil slick which threatens to hit the coast of Norway, so naturally, drama is the order of the day. Attention is immediately grabbed by videos showing powerful scenes like helicopters flying over the sea, and oil rigs on fire, but the use of horizontal scroll adds another dimension to the content, and breaks up the dramatic visuals.

Horizontal scrolling sections are used to create a timeline, depicting accidents that have happened in the North Sea and the Norwegian Sea. As the reader scrolls, they can get some context and backstory to the idea of the film, and learn about the real catastrophes that have happened offshore. After so many intense visuals, the horizontal scroll timeline nicely breaks up the content for the reader.

The Art of Buying a Car

Horizontal scrolling is an excellent way to make long-form web editorial stand out, and it works especially well in scrollytelling. We’ve seen how horizontal scroll can be used to great effect in both ecommerce sites and image carousels, and this next example showcases both examples in action.

Polestar is a luxury Scandinavian electric car brand, and they’ve used horizontal scrolling in their unique Vev-created marketing campaign, The Art of Buying a Car. The content suggests the idea of trading in expensive art for a Polestar vehicle, and horizontal scrolling is used not only to showcase the sleek beauty of these cars, but to emphasize the sophistication of the brand, too.

While most of the content follows the standard vertical scroll approach, the image carousel is powered by horizontal scroll. This technique really makes this section stand out, highlighting the quality of these cars and showing off their beautiful interiors and exteriors. It also saves screen space, provides the reader with a bit of navigational variety, and highlights the high-end feel of both the vehicle and brand.

The John Oliver Collection

Horizontal scroll can be used just as effectively for telling immersive digital stories as it can be for displaying featured products. Canadian wine company Road 13 has used both techniques to great effect in their Vev-built product landing page promoting the John Oliver collection.

The first use of horizontal scroll tells the story of John Oliver, and why Road 13 has created a collection dedicated to him. As the reader scrolls to the right, images of John Oliver appear, along with a couple of his quotes. A brief timeline of his achievements is also highlighted. The separate emphasis of this section of the site will leave the reader in no doubt that John Oliver was an inspiring person.

The second use of horizontal scroll is for more standard ecommerce purposes. Readers can shop the John Oliver collection by scrolling right, with images of different wines appearing alongside their prices and descriptions. To ensure the reader doesn’t miss this crucial content, ‘keep scrolling’ prompts appear next to a horizontal arrow, providing navigational cues.

The Hidden Value in Urban Mining

Political publisher POLITICO also used Vev to create their interactive infographic, The Hidden Value in Urban Mining. This piece of innovative content is a deep-dive into the importance of repurposing valuable materials that already exist, and its use of interactivity keeps the reader engaged.

Horizontal scrolling is used for one particular section of this infographic: How to make a building circular. As the reader scrolls, colorful illustrations of building construction unfold, with clickable hotspots dotted throughout. Clicking the hotspots reveals the most effective ways to reclaim materials and make the whole building process greener.

The use of horizontal scrolling here is a great way to save screen space and make data-driven content feel more visually exciting, especially when paired with clickable hotspots that reveal hidden text. Both techniques keep areas of the infographic clean, ensure readers aren’t put off by walls of text, and allow them to explore these issues in greater detail, but at their own pace.

WWF: Priority Threat Management

Another example of a horizontal scroll website that uses this unique technique to highlight an important issue is the Canadian World Wildlife Fund (WWF). This editorial content was created in Vev, and is all about increasing public awareness of environmental issues, highlighting solutions, and garnering support.

While most of the website uses vertical scroll, a sole section uses horizontal scroll. This section is focused on breaking down what the Priority Threat Management (PTM) of ecosystems actually is, asking questions like “How does it work?”, and explaining how to maximize the benefits – both for diversity and the climate.

The use of horizontal scroll breaks up the website, and makes this part of the content really stand out—it's an excellent way of encouraging the reader to focus on the most important points. It also ensures that the key facts and takeaways aren’t missed, yet allows the reader to discover them at their own pace without feeling overwhelmed.

How To Build A Horizontal Scroll Website In Vev

Inspired by the horizontal scroll websites above? With Vev's pre-coded horizontal scroll sections, adding horizontal scrolling to your own content or site couldn’t be easier. Learn how to craft a horizontal scrolling design on Vev’s drag-and-drop canvas and publish it directly to your existing website in a click — including as an embed in any CMS platform. Watch our tutorial to get started today.