Scroll through scenes like a one page website


(Sev) #1

Hello,

I’d like to build a one page website with Hype where the user scrolls through the whole page. I’m looking for a solution where I can organise the “chapters” of the page within scenes to avoid to build a page with a height of around 20.000 pixels contained in one scene.

There should be an immediate “switch” to the next/previous scene. Better to say, that the next scene should be appended to the previous scene and vice versa. There shouldn’t be any transitions, the scenes should look like as they are “stitched” together.

Is there a practical way to do this or has anybody done something like this and can share instructions and code? I think this a common pattern, but haven’t seen a solution online or the forum that is exactly providing this. I have some JS knowledge but it is very limited.

Any help is appreciated. Thanks.
Sev


(Mark Hunte) #2

If you search the fora for ‘on scroll scene’ you will likely find some more answers and example.
To get you started have a look at this one…


(Loves Hype) #3

Also have a look at this File… you can add such scrollable animations multiple times to a page using different Hype Documents and it takes care of many aspects of your scrolling process:

Hope it helps…


(Sev) #4

Thanks @MarkHunte @MaxZieb.

The scrolling menu example is interesting but fires the transition immediately when a scrolling occurs. I have scenes that have a defined pixel height and not 100% (fullscreen).

The scrolling solution from Max is awesome, if you have different documents. Very impressive. Took my a second to realise this solution is based on different hype documents and not scenes.

Now let’s see how to use this. Again thanks for your help.
Sev