Home » horizontal scrolling website tutorial

Horizontal scrolling website tutorial

If anyone is interested I can write a small tutorial. Hi Diu. I recently thought on this topic. And I think I know how you did it. But the scroll bar is always pisses me off.

Is there any way to change the design of the scroll bar? This is a good tutorial. Some other examples here. It will be nice you share the public url so we can view the setup. It is not smooth enough like the windows news app. Great Topelovely! After looking at your setup. Thanks for the feedback. This works much better for filling the content in WF.

Will try the new JQuery suggestion later. Hi you might want to look at this integration using malihu scrollbar with a lot of customisation. It works with both osx trackpad, mouse wheel and touch. Inspired by Windows 8. When it comes to creating magazine publications. I believe their is always an in-house rule on the number of words an article should have.As a front end developer, more and more frequently I am given designs that include a horizontal scrolling component.

This has become especially common on mobile to help reduce the vertical height of dense pages. Our comp has something like this:. After building a couple of these and battling through unexpected bugs in the QA process, I wanted to find out once and for all how to create a horizontal scroller with minimal code that worked as expected across all types of devices.

The HTML is pretty simple. On our container, we want to turn off vertical scrolling overflow-y and enable horizontal scrolling overflow-x. Then with each card, we want to set it to display with inline-block so they all display in a row.

The line of CSS you probably are unfamiliar with is white-space: nowrap. This property is used to control how text wraps around a container. In this case, we want to disable that wrapping by using nowrap.

As to browser support? Unless you care about Internet Explorer or Edge. Microsoft says they will likely include it in a future version of Edge. Flexbox can make this work for us too.

Pure CSS Horizontal Scrolling

Essentially we are using flex-wrap to achieve the same effect as white-space above. Browser support is better for the flexbox solution. You might need to pull in some vendor prefixes for older browsers, but at least this solution works with IE and Edge. Web pages on iOS scroll with momentum if you are scrolling up and down.

If you flick your finger up or down quickly, the page will keep scrolling after you let go. If you reach the top or bottom of the page, the page will bounce past the end of the wrapper before bouncing back into place. Just remember, while the prefix says webkit, this is most noticeable on iOS.

Now we have the buttery smooth scrolling on a horizontal container. By default a container that has scrolling content will have scroll bars. Makes sense, right? This is for webkit browsers only, however. Sign in.

Pure CSS Horizontal Website Tutorial for Beginners

Colin Lord Follow. The Flexbox Method Flexbox can make this work for us too. Overflow Scrolling Web pages on iOS scroll with momentum if you are scrolling up and down.

Scroll bars By default a container that has scrolling content will have scroll bars. Meteorologist turned developer. Married to katyrae Born in Atlanta. Educated at FloridaState. Now work for Modea as a senior front-end dev in Blacksburg. Bursts of code to power through your day. Web Development articles, tutorials, and news.

See responses Learn Development at Frontend Masters. The web is a rather vertical place. You read a web site like you read a physical page: left to right, top to bottom. But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. Or even crazier, a horizontal site! We do quite a few web presentations. Presentations are a very horizontal thing — usually slides have a or radius.

This means we always have a struggle between the horizontality of presentations and the verticality of web technologies. And by we, I mean me. The specific use case that led to me digging into this idea that a customer wanted to show all their products on a single slide.

Of course, their product catalog was way too big to put in a single view. So we decided to split them up into three categories, each horizontally scrollable. So the three most prominent product in each category were visible and less important products were still easily accessible. There are, no surprise, numerous ways to do this in JavaScript. Some of them are on this very site. I was curious if it was possible to do in pure CSS. The solution ended up being fairly straightforward:. These are arbitrary sizes; they could be anything.

Now we rotate the container degrees with a CSS transform. And there you have it: a horizontal scroller. How would we go about getting the children upright again? Rotate them back using another, opposite CSS transform. By rotating the wrapper using the top right as an anchor point, our left side has shifted by the width of the container. If you find this difficult to understand, just put your finger on the top right corner of a page and rotate it.

The solution: shift it back with translateY.

horizontal scrolling website tutorial

But the first item is still missing, due to the same phenomenon happening to the items. We could fix this by giving the first child a top margin of its width or by translating all items the same way we did the wrapper.

Using the mouse scroll wheel works great on desktops. My laptop was a different matter, though. Both the touchscreen and the touchpad acted as though the div was not rotated.Instead of stacking everything on top of each other, horizontal scrolling containers or lists have become a common layout practice, as it helps reduce the vertical space of devices with smaller screens.

In this article, I want to explore how the flexibility of CSS Grid can help implement a horizontal scrolling component while dealing with some of the pitfalls that comes with it. I will not go into a deep discussion about the UX aspects of horizontal scrolling; however, when resorting to a horizontal scrolling layout, it seems that there are at least two UX principles which must be fulfilled:. Before we begin, let us outline the layout features we want to accomplish:.

So something along the lines of this:. Notice that there is an equal amount of space at either end of the horizontal scrolling container matching the surrounding content width. Now that we have a fundamental understanding of the features we want our horizontal scrolling container to have, let us look into how we might come about coding it using CSS Grid. The convenient thing about CSS Grid is that we can seamlessly control the gutter between the elements without further calculations.

Any direct children of. If a child is equipped with a class of. Let us create the horizontal scrolling container with six cards, showing two at a time. As we want the horizontal scrolling container to follow the overall layout with padding on both sides, we omit the. When subtracting the gutter, we end up seeing the third card peeking out at the end. However — as you might have noticed — the cards are cut off at both ends.

Remember, we want the scrollable content to slide of the edges of the screen when we scroll. You might want to deal with it by adding a margin-right to the last element like so:. So how might we solve it? If we add some empty spaces to either side of the grid-template-columns acting as padding, we should be able to achieve our desired layout. Combined with the grid-gap value of 10px, we have 20px in total, thus following the padding of the overall layout. In order to not having the first card take up the space of the first column of 10px, we bring in empty pseudo elements at each end like so:.It simply makes sense.

Those kind of layouts simply scroll horizontally instead of vertically. Of course horizontal scrolling websites have some flaws. They are mostly related to the user experience and usability. Here are two very important things to keep in mind should you decide to build a horizontal scrolling website:. First of all, we will need an index. You can download those files now. One is simply html and css and the second one has jQuery. You can create your index. Each box will have a set width and the over all width of our layout will exceed the browser window resulting in a horizontal scrollbar.

40+ Beautiful Examples of Horizontal Scrolling Websites

Which is what we want, right? The 8 content boxes have a H2 and a paragraph with some Lorem Ipsum to fill up some space. I know there are other ways to achieve a similar result, using tables for examples, but I wanted to go with CSS and divs only since it works fine.

This may not be the best solution for dynamic websites like blogs since the content length may vary, but even then it could be adapted. I find it works well for a static website like a portfolio. The reason I put some transparency in the menu was because I used fixed positioning left on the menu div. I want the menu to be always visible no matter what box the user is viewing and no matter the size of the browser window. I also used z-index to make sure the menu would always be on top. Try clicking on a menu item!

Remember the 2 jQuery plugins we downloaded? The LocalScroll plugin needs the ScrollTo plugin to work. The LocalScroll plugin is simply wonderful! It does all the job for us really. Then the LocalScroll plugin will simply grab our anchor links and do the rest automatically.

Click here to try out the demo with jQuery. It works pretty much the same in all modern browsers but is expectably a little buggy in IE6 and IE7.

horizontal scrolling website tutorial

I hope you enjoyed this tutorial! As I mentioned earlier, this is just an example of what can be done using HTML, css, 2 jQuery plugins and some pretty basic code. You could of course take this much further and scroll vertically and horizontally, or even diagonally!

You can also download a zip file containing the 2 demos with all the necessary files. Feel free to experiment! Another approach based on your scrolling center section is to absolutely position a div block in the center and set the overflow value to allow a scrollbar and give it a width like you do for your content here. This is a good article on a foolish topic. Web designers get bored making websites, because most websites are basically the same apart from the content.

When you hear one of these fatuous platitudes, beware: muddy thinking lurks behind it!The idea of parallax design is simply an awareness of movement. Building onto this concept we now have a wide variety of design trends meant to replicate parallax movement on the web.

In this guide I will to cover everything you could ever need to know about parallax scrolling and parallax design techniques. One of the simplest ways to understand design is through example. The conversation on parallax design starts with an implication of dynamic effects. Granted there are a few parallax scrolling effects which are easy to support but they still require a hefty amount of code.

Fallback methods are quite important in the discussion of best practices. Is there a particular reason the page should be animated? Should any graphics or typography also be animated? Parallax features work best in unison with an overarching theme. Depending on the type of parallax animation you might have backgrounds that shift or graphics that span the entirety of a page. I would suggest developing a fallback method which can work in all browsers even without animation effects.

At the very least make sure visitors can still browse the static website. To use a single relatable word to encompass all of this: simplify. Parallax scrolling can go from cute and fun to overly-complicated with just a few additions.

Generally speaking, a great parallax layout should tell a story. I really like the example on Movement of Data which behaves like a parallax infographic. While the effects are not extraordinary they do provide an efficacious storytelling method. The homepage animates in a circular fashion rotating through different sections of content. The goal of a parallax website design is to impress visitors while still maintaining all the customary statues of unofficial UX design law.

Great parallax websites convey their message in an easily-consumed format while contributing to the digital art form. The following examples may not be completely unacceptable but there are some facets of each parallax effect that make me frustrated as a user.

And frustrating the user is a cardinal sin that should be punishable by 2 weeks of forced Internet browsing with an outdated version of Internet Explorer — let the punishment fit the crime right? Let me state that I love their message and graphic design. The page itself is actually very well crafted. However, in regards to user experience, the page is quite limiting and uncomfortable. The only way to navigate is by tediously scrolling with the scrollbar and perniciously feeding that arthritis.

The whole experience feels imprisoning and while the design is fantastic it simply cannot subdue such an annoying UX problem. A polish website for the children network presents a side-scrolling parallax design with one glaring problem: the whole page is made up of images. Yes the text itself, which could have been easily typed into HTML, was instead created with images.A horizontal scrolling website seems counterintuitive. Creating a horizontal scrolling website is an exercise in an out of the box thinking.

This design choice has been a small but growing trend. However, creating an effective and usable website with a horizontal scroll layout is a challenge. Follow these tips and trick to know if one of these layouts if for you and, if it is, figure out how to make a horizontal scrolling website that helps rather than hurts.

Creating a website with a side scroll layout also known as horizontal navigation has been a controversial web design technique for a long time.

It was long considered one of the greatest web design faux-pas. However, sideways scrolling has been around since the earliest iterations of the internet. Some consider them the most modern and latest web design layout.

What prompted this change in attitude? Well, with tablets, swiping motions have allowed horizontal scrolling websites to make an effective comeback. This swiping motion makes a horizontal scroll much more viable and user-friendly, even less counterintuitive. Horizontal scrolling websites have their advantages and challenges.

They can create a more intriguing, interesting layout. They typically cause a user to take a look at your website for a little bit longer. However, that means that your horizontal scrolling website needs to be designed well. You need to think through it carefully.

How To Make A Horizontal Website Tutorial

Before you even start down this path, make sure sideways scrolling is for you. This layout, as stated above, is pretty controversial.

The only real reason to use a horizontal scrolling website layout is to attract user attention. However, when you design one of these websites right, it creates a unique and intriguing user experience.

You can use the parallax effect to great result with a side scroll layout. There are four specific situations where a horizontal scrolling website creates a good user experience:. Horizontal scrolling website designs are better for certain website functions than others.

Gallery sites often make use of it and so do quite a few portfolio sites. It is an interesting way to allow site visitors to scroll through a set of images.

Occasionally ultra-niche retailers use as well as a way to have a fresh look. Some more typical retailers use it to display features of particular products that they want to highlight. Consistency across device— Horizontal scrolling websites allow for a consistent look on mobile devices and computer screens.

Horizontal swiping has become very common on mobile devices. Many apps use it, after all. Because mobile-focused designs are increasingly important, choosing to use horizontal scrolling as the basis of their websites to save on resources and sign time.

horizontal scrolling website tutorial

This has a catch, though. Sideways scrolling has been less common on desktop sites for a long time, so users may not pick up intuitively that they have to scroll across the screen rather than up and down it to see more content. This can cause a one-size-fits-all design approach to backfire. The key take ways here is that users are more likely to think about design consistency when they are moving between websites on the device they are currently using.

However, if you expect users to view it on a desktop screen, you may want to create a sideways scrolling mobile site and a vertically scrolling website.

Browsing through non-critical content—not all content is critical. This secondary information can be communicating in different ways, including photo galleries of example images.


About the Author: Kazrarisar

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *