17 Stunning Examples of Sites with Horizontal Scrolling
Intuitive navigation is among the key elements of web design. The way we move from one section of a site to the next and how we browse the content can deeply affect our user experience. Most of the time, website owners want to play it safe, and so they go with the tried-and-true vertical navigation that we’re all accustomed to. However, horizontal scrolling can look way more interesting than its vertical counterpart.
A side scroll layout is an attractive and practical choice, especially for portfolio websites, catalogues, maps, and similar. Discovering projects, exploring cities, and visiting online galleries is far more engaging with sideways navigation. When done right, horizontal scrolling can make a website more appealing, fun, and memorable, as the websites on our list beautifully illustrate. These are some bespoke examples that represent the perfect synthesis of striking content and clear horizontal navigation:
Check out the awesome horizontal scrolling widgets we introduced with Qi Addons for Elementor:
Exploring Square’s fascinating website is an unforgettable experience. This is an online platform where people can exhibit their works and it’s executed in such a creative manner. From the get-go, you’re invited to explore the site with a Let’s Rock! button that, when clicked, opens the gates of a web empire where contrasting colors, popular animated GIFs, ‘90s-inspired images, and synth melodies welcome you. And all this happens before you even access the main content.
To see the artists’ works, you first have to drag a square using your mouse until it reaches the finish line embodied by a red dot. As you roll the square, some well-known illustrated characters show up to keep you company, such as Super Mario, Darth Vader, Eric Cartman, Bender from Futurama, etc. Only after you’ve completed this minigame do you get to see the featured projects.
On the homepage, you’ll see the word Square written in huge, all caps letters across the screen, and, depending on how you move your mouse pointer, the letters will lean in that direction, too. This action also impacts the way you move through the site. If you move your cursor in any direction, your floating adventure through the Square universe will commence. You get to choose whether you’d like to explore it in a horizontal, vertical, or even random manner.
Home Société is a brand that makes luxurious furniture for homes and outdoor spaces. Their website was crafted by the award-winning Locomotive agency, so it’s not surprising it looks so creative and interesting from the very first scroll to the last. This is a one-pager with a sleek, left-to-right horizontal scroll. The whole site is essentially simple, but enrapturing thanks to smooth animation effects and attractive showcases of the company’s works. The main navigation is clear and visible at all times, placed on the left-hand side of the screen, so you can always jump right to the section you’re most interested in. When you reach the end of the horizontally scrolling home page, you’re greeted with a fullscreen section of large typography that beautifully complement the brand’s contemporary designs.
D. Potfer Studio is a French consulting and communication studio that specializes in art de vivre, culture, and food and beverage. Their works are displayed in a horizontally-scrolling carousel gallery. The imagery looks very soft, dreamy, and is wonderfully juxtaposed with the thin, sharp typography. The graphics are also stunningly animated, which makes the scrolling adventure all the more fun.
Kwok Yin Mak’s site is a wonderful oasis of minimalism that undoubtedly leaves a strong impression on visitors. This is another stunning example of a one-page website with horizontal scrolling that, in this case, works both ways. As soon as the site loads, you can choose to scroll either left or right. The main navigation is somewhat hidden in the bottom-left corner of the screen. But as you hover over About, Work, and Guestbook, an arrow will point you in which direction to scroll to reach those sections. Thanks to the use of eye-catching photographs, great typography choices, font sizes, and simple animation effects, Kwok has managed to create a terrific website that beautifully showcases his creativity and skills.
Prevint is an interpersonal violence prevention programme whose goal is to raise awareness about the various types of violence people are most often exposed to. The designers of this site have opted for a horizontal navigation to introduce visitors to what their organization is about and to share three spectrums that may be helpful to the people exposed to violence. This website is a great example of how the horizontal scrolling effect can be a great choice when you wish to present some general ideas to your users, but you don’t necessarily have to stick to it on the whole site. In fact, here the horizontal navigation disappears in favor of the storytelling scroll effect once visitors click to learn more about any of the spectrums. Prevint’s website has been awarded multiple times and has won the Website of the Day awards on CSS Design Awards, Awwwards., and The FWA.
Canals is a charming project created with the purpose of telling the story behind the famous Amsterdam canals. This captivating website resembles a magazine, and thanks to the horizontal navigation, we almost feel as if we’re holding a physical copy in our hands and we’re flipping through its pages. The marvelous imagery, parallax effects, bold typography, and vivid colors, instantly transport you right on the banks of these historic canals. The main menu is visible on the left side of the screen. As you scroll, the menu’s color will change depending on the background hue of the slide you’re looking at.
We created the Qode Interactive Catalog with the goal of showcasing an original approach to contemporary web design. The Catalog is a curated compilation of several of our creative themes, all with distinct aesthetic qualities inspired by a variety of art forms. We chose to implement a horizontal scroll in this project to evoke the effect of walking through a gallery space and viewing artwork. As you hover over the name of each featured theme, you’ll catch a glimpse of its design. And by clicking on the title, you can start exploring the theme’s project page. We’ve kept the side scrolling here as well, since we didn’t want to disrupt the horizontal harmony on individual pages. The QI Catalog has won several awards, including the Site of the Day recognition by Awwwards, the Website of the Day award from CSSDA, and the Webpicks award by Communication Arts, among others.
New Themes
VIEW COLLECTION
Christie Tang is a product designer with a remarkable portfolio website. The horizontal navigation allows us to explore a reel of her latest works, which elegantly glide from the right to the left side of the screen. As you reach the seventh project, the background color turns from white to black and the navigation goes from horizontal to vertical. With each new scroll, you are led straight into the depths of Christie’s creative world which features examples of her artistry and versatility. The main menu is always visible and placed at the top of the screen. As you hover over the menu, a cool thing happens – amusing videos show up over the entire screen (one of them even shows Christie herself playing a video game), inciting you to learn more about this undoubtedly unique and inspiring designer.
Behind Peak’n Film stands Thom Garcin, a French photographer and video maker. This amazing website is a captivating display of Thom’s breathtaking works. Everything is simple and minimalistic, which allows his work to steal the spotlight. At the top of the page, there’s a progress bar showing you how far you’ve come and how much of his images are left to be seen. The horizontal effect is smooth, works like magic in both directions, and complements Thom’s portfolio perfectly. The whole project is astounding, hence all the awards it won at The FWA, Awwwards, and CSS Design Awards.
Gosha Khidzhakadze is a developer with an unpretentious website that is very pleasing on the eye and fun to explore. The imagery is monochromatic and the background is neutrally colored. So what immediately grabs your attention is Gosha’s name written in massive, orange letters that slowly move off-screen as you scroll through his works. When you place your mouse cursor over any project, the images become wavy, as if observed through water, and this is where Gosha’s expertise in animation becomes evident. The pointer assumes the form of a dispersed circle, and as you move it over a photo, it reveals snippets of other pictures featured in the selected project.
We mentioned this website in our article on floral illustrations, but Gingko is also a great example of horizontal navigation in action. With each scroll, you get more drawn into Karine Goxe’s inviting world of landscape architecture. All the animation effects are unobtrusive and everything flows smoothly, but the horizontal harmony is a bit shaken up at the section where Karine’s works are displayed – that’s where vertical navigation takes the reins, even if only momentarily.
Emanuele Milella is a creative director and interactive designer with an award-winning portfolio website. The pages are covered in sandy-like, grainy texture that gives the site a retro vibe. The Works section is where the horizontal scrolling effect enters the scene. You can keep track of how many projects you’ve seen by keeping an eye on massive, bold numbers displayed next to each project or by checking out the progress bar placed below images. When you hover your mouse over a picture, the graphics start to follow the movement of the cursor and so they become distorted, though not dramatically. This is just an amusing element that demonstrates Emanuele’s attention to detail and his clever ways of adding a fun factor to projects.
The content on Myles Nguyen‘s website appears to make perpetual waves. Quite literally. The undulating effect extends throughout the entire site, so the choice of horizontal navigation makes perfect sense. With each scroll, users feel as if they’re conquering waves, which lead them straight to the examples of Myles’ works. To make this mostly monochromatic showcase even more memorable, Myles has infused the content with humor and sarcasm, showcasing his interesting personality some more.
Parsons Branding is a brand strategy and design studio from Cape Town. On their website, you can choose between a never-ending carousel and a full project grid view. If you opt for the former (which is set as the default view), you’ll be able to browse through the studio’s projects using horizontal scrolling, whereas the latter comes with an infinite scrolling space you can go through in any direction you desire. Once you find the project you wish to know more about, click on it to open a case study. And when you reach the study’s end, another one about some other project will load, and so on, supporting the idea of continuity which is omnipresent on this website.
Studio Björk’s website is another shining example of horizontal scrolling, which is used on each page of the site. This website is quite minimalistic, mostly in black and white, while the more vivid colors are visible only on the displayed works. The screen appears to be divided into several sections, each corresponding to one project. Below each picture, there are a few basic details about the piece of work in question. If you’d like to learn about it in greater detail, click anywhere you want within the borders of the section where the work is showcased, and then read an in-depth case study about the project.
Themes with Horizontal Scrolling
View Collection
Spoiler alert: If you haven’t watched season 4 of La Casa de Papel but plan to, you might want to skip this site as it reveals a major spoiler.
Ciao Bella was created by Netflix in tribute to Nairobi, one of the main characters in the hit show La Casa de Papel. The website is filled with photos, videos, letters, and audio content people from all over the world sent to their beloved character. The content is displayed over the entire screen and you can go through it by dragging the cursor in any direction you like. When you find something you’d like to watch, read, or listen to, simply click on it. You can then drag your mouse horizontally to explore the content featured in the same row and discover what else the fans and the cast of the series had to say about Nairobi.
Vogue España’s online edition about ‘80s fashion is a one-pager that highlights all the major fashion trends from the era of synth pop, leg warmers, and mullets. You can navigate through the ‘80s-themed graphic and textual content using horizontal navigation, and it’s precisely this effect that gives the whole website a distinct lookbook-feel.
Final Thoughts
Horizontal scrolling is an effect that has the power to make browsing more engrossing and enjoyable. What matters is to plan it well, make it easy to use, organize the content, and ensure the main navigation is visible at all times. It’s important to keep things simple and clear to avoid confusing visitors. But that doesn’t mean you shouldn’t experiment with typeface choices, colors, and entrancing animation effects. Let’s not forget about the parallax effect that was so efficiently used on several websites from our list. The point is, the elements you would consider adding to a vertical site can work just as well on the horizontal counterpart. Don’t limit yourself just because you’ve opted for a less popular navigation type. Be creative all you want, make your website aesthetically pleasing, add compelling and informative content, and above all, ensure your project is beneficial for your users.
