The majority of sites we encounter are vertical scrolling, so coming across a horizontal scrolling site can be like a breath of fresh air – if they work well. Horizontal scrolling has never really been in trend, but since the first such sites a few years ago, they have not really gone out of trend either. Horizontal scrolling sites are a good way of displaying galleries, and also of using your site to tell a story – but as you will see from this collection, all types of sites can effectively use horizontal scrolling.
Horizontal Scrolling in Web Design
Pretty Production
This site is fairly content-heavy, but still manages to appear quite minimal. Using a gray background and splashes of bright colors in the illustrations. Navigation across the site is either by the slider at the bottom of the page, or the category menu at the top.
SectionSeven
This design and development agency uses a card-style layout for its horizonal site. Navigation is achieved simply by moving the mouse to the right or left of the screen. Hovering over any category makes it enlarge slightly, so looking like it has moved forward from the others.
Samuel Esteves
Scrolling across this site reveals the gallery of this photographer. Navigation is achieved by either scrolling down with the mouse wheel, or dragging the slider on the right of the screen.
Gudang Damansara
This site showcases the work of a group of individuals with a passion for design and craftsmanship. Navigation is either via the right and left arrows at either side of the screen, or my the navigation menu at the bottom of the page.
Lorenzo Bocchi
The portfolio site of designer Lorenzo Bocchi uses a card style horizontal layout with a heavy black transparency over the images. Hovering the cursor over any ‘card’ brings it into full color with a link to ‘view the project’. Clicking on the hamburger menu button in the top left corner makes the menu slide out from the left. Navigation is either by scrolling the mouse wheel or using the slider at the bottom of the page.
Costume National Scents
This eCommerce site sells a variety of fragrances. Scrolling across the site brings each scent bottle into focus with an abstract splash of watercolor paint effect behind it. Navigation is achieved either by scrolling with the mouse wheel or clicking on the navigation dots at the bottom of the page.
Guillaume Juvenet
Another portfolio site – this time the showcase of a young developer. This site opens with the outline illustration being ‘drawn’. A small section of ‘code’ on each page shows information and links – on the ‘Skills’ page, you are asked to type ‘/list’ if you wish to view the list of skills.
James Joyce
James Joyce is a British artist and designer. This site is a showcase of some of his works, and if you look at his profile you will see some of the very big names he has worked for. Hovering the mouse over any image will give details about the design/art. Navigation across this gallery is via the slider at the bottom of the page.
C.L. Holloway
This artist has covered every angle of navigation on his gallery site. You can view the gallery by hovering the mouse over the right and left arrows towards the bottom of the screen – although the page moves very quickly using this method, you can use the slider at the bottom of the page, or you can use the links in the navigation menu at the top of the page.
WWF Earth Hour 2012
Although this WWF event is way past, the site is still available and the information still relevant. This is all about the food we eat. Navigation is via the Start button, then the Next and Back buttons on subsequent pages.
Hot Dot
This web development agency uses a very dark background of a geometric pattern, and as you scroll across the site images float across the background. Navigation on this site is by scrolling the mouse wheel.
This Year in Hashtags
This site looks at some of the popular hashtags of 2014 that have been visualized by various artists. You can navigate this site by scrolling the wheel on the mouse, but it is very slow. Dragging the diamond shape towards the bottom of the screen is a better method.
The Bright Future of Car Sharing
This site has been around for a long time. It is almost an infographic about the advantages of car sharing in the US, with lots of facts and figures. Navigation is achieved via the slider at the bottom of the page.
Dean Oakley
This designer and developer uses true parallax scrolling on this site, but unusually, it is horizontal. The illustration at the bottom of the screen and the clouds all remain static as the content scrolls across.
Volkswagen Electrique
This site promoting Volkswagen’s electric cars to the French audience uses a photo of the car in the center and landscape illustrations surrounding it. Navigation is either via the arrows center right and left of the screen, or by clicking on the dots towards the bottom of the screen.
Q + H London
This design agency uses a grid style layout to showcase it’s works. Hovering the mouse over any image covers it with a white transparency with black headline text. Scrolling across the gallery is achieved with the mouse wheel.
The Mobile Playbook
This is a Google project, and is a book designed to be read on mobile devices, but it works well for this article too! Scrolling (on desktop) is by the mouse wheel, by dragging the slider at the bottom of the page, or by holding and dragging the arrows right and left of each page.
Lois Jeans
Each page of this site has one link amongst the images – and that image has a red transparency over it. With static images and videos on each page, this is a great example of both horizontal scrolling and general web design.
Anders Drage
This portfolio site uses horizontal scrolling that just goes round and around – the opening ‘about’ statement never appears again, it is replaced with a ‘thank you for visiting my portfolio’ comment.
Roadtrips, South Australia
This site outlines the details of 5 roadtrips across South Australia. You can either use the small arrow along the top navigation bar (this starts a slideshow which can be stopped again), or the top navigation bar itself, you can scroll the mouse wheel or use the left and right arrows to navigate this site.
Conclusion
Most horizontal scrolling sites are inspirational in one way or another – maybe some give inspiration on how NOT to do it, but I think this collection definitely show just how to do it correctly and effectively – the navigation of the sites differ, and some make absolutely sure that you can find your way across their site by offering two, three or even four methods of doing so.
Have you created a horizontal scrolling site? Do you think this type of design will ever fully trend or will ever go completely out of style? Please share your links and opinions with us in the comments section below.
