How to make a Horizontal "One-Page" Website?

Hey, I’ve made one-page websites and of course they are very in fashion.
However, how would you go about making a website whereby changing to the next page, it scrolls in from the right?

Maybe this isn’t a “One page” website, I am thinking Navigation and each click to the page would scroll the page in from the right. (Like changing pages in a book).

Would you do this with transition animations with css?
Would each page be a different file, or all in one and have them as different sections just like a One-page website?

Any inputs and thoughts on this would be great!
Also, if you have any live examples that would be awesome too!
Thanks!

Sounds like you are on the right track. You could absolutely do this as a one-page site. I might be easiest using JavaScript in conjunction with CSS to produce the effect you are after.

Hey, your question got me thinking and here is a very basic layout based on that concept:

Interesting… Looking into how you have done it, is it possible to make the navbar stay in the same place without scrolling down diagonally to the right? IE: it scrolls to the section ID but i’d rather it say with the navbar?

OR

Have the navbar on the side and stay fixed so it can scroll to the id’s without worrying about the vertical height (If I make all sections 100VH) 1 page per section.

Do you have any ideas in mind to make the same effect with totally different pages, (Not a 1 page website) but where all the Nav links are relative to other pages?

Thanks!

I have something like this:


except, as you can see, the nav bar gets covered when you change page and also, the margin shows a white gap when it slides, I want the nav bar to be in the same place over the top of all sections (obviously not covering text etc) :slight_smile:

EDIT:

Just realised that when I changed it testing around again, I edited this link too.

Here I have a fixed the navbar etc HOWEVER, when I click “two” then “one” when two is moving, it will freeze and will not unfreeze unless I click three.

Any ideas?

change the height of the .section to 100vh from 100% to get rid of the white

Anyway to prevent freezing? Unless, I just dont use smooth-scroll, and code it in javascript?

@ChrisCline1138 - PS: I cannot post for 6 hours as a new user, too many replies. Ill edit here for further responses? :slight_smile:

@ChrisCline1138 This is the type of freezing I mean:

if it links to a different page it will leave that site and load the new page so I don’t think that will work.

I’m not getting the freezing so I can’t really comment. I added the smooth scroll behavior to make the right scrolling more noticeable. I am not very far with javascript but I am sure that could take it much further

Not sure if you saw but I added gif above when I couldnt comment (For 6 hours for being new! :frowning: )

It freezes with smooth scroll if you click a link then another while still scrolling.

I see that now, going to have to do some research as to why. I’ve never used this technique before it is an experiment based on your initial post. Seemed like a fun challenge.

added javascript version of smooth scrolling. trying to get it to work though
https://www.w3schools.com/howto/howto_css_smooth_scroll.asp

Is it javascript or jQuery? I really want to avoid jQuery and am hoping for a vanilla JS solution :slight_smile:

Still looking for a Vanilla JS solution! :slight_smile:
View the jQuery code I have here to no turn this topic into something else:
jQuery to JS