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!
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?
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?
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)
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.
change the height of the .section to 100vh from 100% to get rid of the white
@ChrisCline1138 - PS: I cannot post for 6 hours as a new user, too many replies. Ill edit here for further responses?
@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.
Not sure if you saw but I added gif above when I couldnt comment (For 6 hours for being new! )
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.
Still looking for a Vanilla JS solution!
View the jQuery code I have here to no turn this topic into something else:
jQuery to JS