Move Along…. Inspirational Horizontal Scrolling Sites

logo Move Along…. Inspirational Horizontal Scrolling Sites fallback_image_for_posts Move Along…. Inspirational Horizontal Scrolling Sites

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.

1-PrettyProduction Move Along…. Inspirational Horizontal Scrolling Sites

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.

2-SectionSeven Move Along…. Inspirational Horizontal Scrolling Sites

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.

3-SamuelEsteves Move Along…. Inspirational Horizontal Scrolling Sites

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.

4-GudangDamansara Move Along…. Inspirational Horizontal Scrolling Sites

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.

5-LorenzoBocchi Move Along…. Inspirational Horizontal Scrolling Sites

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.

6-CostumeNationalScents Move Along…. Inspirational Horizontal Scrolling Sites

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.

7-GuillaumeJuvenet Move Along…. Inspirational Horizontal Scrolling Sites

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.

8-JamesJoyce Move Along…. Inspirational Horizontal Scrolling Sites

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.

9-CLHolloway Move Along…. Inspirational Horizontal Scrolling Sites

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.

10-WWFEarthHour2012 Move Along…. Inspirational Horizontal Scrolling Sites

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.

11-HotDot Move Along…. Inspirational Horizontal Scrolling Sites

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.

12-ThisYearinHashtags Move Along…. Inspirational Horizontal Scrolling Sites

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.

13-TheBrightFutureofCarSharing Move Along…. Inspirational Horizontal Scrolling Sites

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.

14-DeanOakley Move Along…. Inspirational Horizontal Scrolling Sites

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.

15-VolkswagenElectrique Move Along…. Inspirational Horizontal Scrolling Sites

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.

16-QHLondon Move Along…. Inspirational Horizontal Scrolling Sites

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.

17-TheMobilePlaybook Move Along…. Inspirational Horizontal Scrolling Sites

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.

18-LoisJeans Move Along…. Inspirational Horizontal Scrolling Sites

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.

19-AndersDrage Move Along…. Inspirational Horizontal Scrolling Sites

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.

20-RoadTrips-SouthAustralia Move Along…. Inspirational Horizontal Scrolling Sites

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.

To show main source of content:
http://www.onextrapixel.com/2015/07/14/move-along-inspirational-horizontal-scrolling-sites/

%d bloggers like this: