I’ve been seeing this effect more and more on awwwards.com and I’m curious if it’s possible in Webflow.
Notice how the site links to the next page whenever you scroll to end of your current page…HOW?!
I’ve been seeing this effect more and more on awwwards.com and I’m curious if it’s possible in Webflow.
Notice how the site links to the next page whenever you scroll to end of your current page…HOW?!
Hi, I’m the developer of Sacha’s Portfolio
So basically for the page switch when scrolling, I’m just watching the scroll progression.
When the main container reaches a 100% translateX, I push the next page with the router.push function of VueJS. Same thing when the container reaches a 0% translateX.
Unfortunately I can’t tell you if it’s possible on Webflow or not, since I’ve never used Webflow
Just wanted to tell you, that’s a beautiful site!
Thanks Andy! That means a lot to me
@fxmanceau As a complete coding novice, sorry if this is a silly question. There appears to be minimal/no load time between your pages. Is this something you achieve with javascript, or do you simply mask the page load with an animation/transition?
There are no silly questions
Indeed, there is no loading time except at the beginning. The site is a VueJS SPA, so technically you only load one page, but there are still virtual pages. When you switch between pages, there is a transition but only for the aesthetic.
On Sacha’s portfolio, I fetch data when loading the site for the first time (so it only loads big size files/images/videos, and all the texts of the site from a custom API), then I store it into a global variable (thanks to VueX), and I also put it into a localstorage variable. This last thing is to make the portfolio available when you are offline (PWA combined with localstorage).
That’s awesome, thank you very much for the detailed reply!
My please
If you have further questions, feel free to contact me on Twitter!
Yo man I got some js for you! No kiss needed! This only changes when you scroll down. However I would tweak it with some offsetting so there’s no bad UX
window.addEventListener(“scroll”, () => {
const scrollable = document.documentElement.scrollHeight - window.innerHeight;
const scrolled = window.scrollY;
if (Math.ceil(scrolled) === scrollable) {
window.location.replace(“https://google.com”);
}
});