Next page on scroll

Design help Custom code
1

Hi, I would like to make it so my showreel starts playing when entering my page and go to my home page when scrolling or clicking (exactly like the start on this page https://www.charlie-montagut.com/). I know how to do it by click but i would like to add scroll.
(Scroll equals a click or if scroll then navigate to home )

Does anyone know how I can do that with interactions, custom code or well… anything.
My page is www.oedesign.no
The page is called Showreel home in the project.

Here is my site Read-Only: https://preview.webflow.com/preview/oedesign?utm_medium=preview_link&utm_source=dashboard&utm_content=oedesign&preview=56d3678e09d44132d0c4430d58d9acfd&mode=preview

2

Hi @martsord you are looking for “page transition” . Here are some examples to look at but when you google term “css page transition” or more specific “webflow page transition” you will find much more examples.

Webflow
22 examples

3

Hi Stan, thanks for answering.
These examples look like they approach the visual aspect, but my issue is how to change the url when doing any scroll.

I would like to make a code that makes scrolling on this page, resemble a click on the showreel. Just to guarantee that the user wont be stuck in the showreel not understanding what to to.

Did that make sense?

4

hi @martsord this effect is called “page transition” because it provides visual transition effect from one page to other in other words from URL to URL. That’s why I have pointed you this direction because your example does exactly this effect. I do not getting what else are you looking for.

5

Sorry I might have been unclear in my question

I’m not looking at the visual effect and the transitions from a visual perspective is not relevant at this point.

I only need the technical command that happens when you scroll and the page changes.
I want to know how I can add code that says "If user performs a scrolling gesture, then redirect user from Current page “https://www.oedesign.no” to featured page “https://www.oedesign.no/featured”

6

Hi @martsord you can add custom code in 3 places. In Project Setting “custom code” on Page it self in page setting or in “embed” element you will find in “add element” section. All these informations are on Webflow University that is a great source of any kind of information about this platform.

7

Hi Martin,

You could add this first in your “before body tag”

window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight) {
setTimeout(function(){
window.location.href = ‘https://www.google.com’;
}, 5000);
}
};

This way the page can detect on whether the user has scrolled to the end of the page. You can change the link and the delay time as you like.
See if this code can help you in any way, let me know if this code doesn’t work.

2 Likes
8

Thank you so much, Charles.
It works well.

I have an interaction connected to the click function. Is it possible to make the scroll use that as well? I want scroll to have the half transition (black div slide up) that i have if you click on the video.

9

Great to hear that! Hope you can use it well.

Do you mean like a pop up video? Or can you give me an example? because I don’t quite understand what you want to achieve here. :smile:

10

Oh no prolem i believe i can fix it in interactions. thanks for your help!