Horizontal Scrolling
Bringing a New Dimension to the Web
Horizontal scrolling brings a refreshing, new dimension to web content—using fluidity, novel interactivity, and clever visual breaks to create highly-engaging web experiences.
Horizontal scrolling in and of itself doesn’t sound that groundbreaking—it’s a web page format, after all. Yet, play around with different content types and dynamic elements—such as scroll-triggered videos, parallax images, text animation, and data visualization—and you’ll quickly see the power of this simple visual technique.
What Can You Do with Horizontal Scrolling?
Horizontal scrolling is a great choice for anyone looking to create more visually interesting, interactive websites—engaging readers with an unusual and memorable navigational experience. While most web designers use it as a supplement to vertical web experiences, you can build fully-blown horizontal websites.
Horizontal scrolling in and of itself doesn’t sound that groundbreaking—it’s a web page format, after all. Yet, play around with different content types and dynamic elements—such as scroll-triggered videos, parallax images, text animation, and data visualization—and you’ll quickly see the power of this simple visual technique.
What Can You Do with Horizontal Scrolling?
Horizontal scrolling is a great choice for anyone looking to create more visually interesting, interactive websites—engaging readers with an unusual and memorable navigational experience. While most web designers use it as a supplement to vertical web experiences, you can build fully-blown horizontal websites.
Horizontal scrolling websites
Want to subvert standard UI design methods and break away from traditional vertical websites? A well-designed horizontal scrolling website is sure to capture audience attention and pique their interest with an unconventional UI experience. It’s particularly great for communicating timeline- and process-based stories, crafting stand-out company homepages, and delivering slick, interactive presentations.
Horizontal scrolling sections
If a fully sideways website is a bit much, you can also incorporate horizontal scrolling through sections in an otherwise vertical experience. This is great for presenting categories of content—something that Netflix popularized with its sideways genre carousels. It’s also a great way to introduce visual breaks to sustain engagement in long-form content—giving users a refreshing change of pace through novel movement between sections.
Horizontal Scrolling Examples
Wondering how to use it in practice? Take a look at this hit list of innovative horizontal scrolling websites to inspire your next web project.
Horizontal scrolling websites studded with interactive elements look difficult to make—but they are actually deceptively simple. Let’s take a closer look at the three main approaches to building one.
How to Build a Horizontal Scrolling Website
Even if you don’t know CSS, HTML, or JavaScript, with the help of a no-code website builder you can knock up a custom scrollytelling website extremely quickly.
They were struck by how quickly they were able to learn how to use the tool and create what they had envisioned. Using a tool that is both intuitive and supported by an agile Vev support team, D2 has been able to bring new capabilities to any project.
Expansive and intuitive
It was as simple as that. Vev was the only tool that gave the writers and designers everything they needed to be able to translate their print publication onto the web without sacrificing a single asset. In fact, they could build on existing assets, and enhance their digital look and feel.
Vev quickly rose to the top
It can do things no other platform can
Vev allows for free-flowing creation, through and through. The platform simply does not have the limitations other tools do, like Ceros or Webflow.
Simplified process
With very few hoops to jump through, D2 found the path from idea to final product to be even shorter and even more practical for producing a weekly magazine.
Vev quickly rose to the top
It was as simple as that. Vev was the only tool that gave the writers and designers everything they needed to be able to translate their print publication onto the web without sacrificing a single asset. In fact, they could build on existing assets, and enhance their digital look and feel.
Expansive and intuitive
They were struck by how quickly they were able to learn how to use the tool and create what they had envisioned. Using a tool that is both intuitive and supported by an agile Vev support team, D2 has been able to bring new capabilities to any project.
Simplified process
With very few hoops to jump through, D2 found the path from idea to final product to be even shorter and even more practical for producing a weekly magazine.
It can do things no other platform can
Vev allows for free-flowing creation, through and through. The platform simply does not have the limitations other tools do, like Ceros or Webflow.
Creating a horizontal scroll container with CSS
If you decide to go the HTML route, you can whip together a horizontal scrolling container using the “overflow” CSS property. The good folk at Codeburst have broken down two neat ways to go about this, the simplest of which just uses the following code.
As with any type of design, it’s important to pay close attention to the overall page layout, including the margins and padding. You’ll also need to play around with spacing, gutter and viewport size to get the look of your scrolling section just right.
Creating a horizontal scrolling website without code
You don’t need to be an expert developer to make your scrolling website a reality. No-code website builders like Vev help creatives design and publish horizontal scrolling sections and websites without needing to code a thing. It’s as easy as dragging the Horizontal Scroll sections you want onto a tactile visual canvas. You can then explore a library of pre-built animations and interactive components to customize your website however you like. If you work with developers, they can jump in and tweak any of the code too.
React horizontal scroll resources
You can also build a horizontal scroll section using React code—check out this example from Stackoverflow for scrolling through a card section on hover. To save yourself the heavy lifting, you can also add your own custom code to pre-built horizontal scrolling components in React-friendly website builders. It’s exactly why we built Vev—combining the best of no-code for non-technical users, and low-code for seasoned developers.
1
2
3.scrolling-wrapper {
4 overflow-x: scroll;
5 overflow-y: hidden;
6 white-space: nowrap;
7
8 .card {
9 display: inline-block;
10 }
11}
12
13
14
Group content by topic
Showcasing important content in a horizontal manner reduces scrolling effort so users reach relevant information quickly. It allows you to segment your content based on a specific topic or idea of interest.
Follow best practices
As a creative design choice, horizontal scrolling can be used in any web project—but to make it work to your advantage, you need to implement it strategically and respect a few UI best practices.
Give readers navigational cues
As an unconventional interaction, many users may not know how to properly navigate through horizontal content. To make the users experience more pleasant and natural, horizontal scrolling options should be visually apparent.
Create the illusion of a shorter page
This lets your readers browse your content without needing to continuously scroll to find what they’re looking for. It also saves vertical page space, giving you more leeway above the fold to get creative with your web page designs.
How to Use Horizontal Scrolling to the Best Effect
Watch Our Horizontal Scrolling Masterclass
Get an in-depth look at how to build your very own horizontal scrolling website without writing any code. In this masterclass you’ll get a walkthrough of basic techniques, how to add custom animations and shapes, and how to build multiple sections that create the scrolling effect.