Product long scrolling page

Hi,

I am working on a long scroll-page:
https://www.flyingdog.de/bpm_test/index.php

Navigation is possible by clicking on arrows or just scroll the page :wink:

It is my first Babylon.js project and also first time I am using Blender/Bforartists.
This is work in progress(!) - so some bugs need to be still fixed, some things are still not interactive (e.g. process), mobile version also will be made and end is missing - it stops it “statistics”. But overall development is coming to an end so I decided to post it here.

Any feedback is welcome - so I can improve it until final version :wink:

My first concern would be - are there any serious performance issues? Target group would be mostly Windows desktop users with standard office but no game PC hardware - around 1-3 years old. I am using a 5 year old iMac which is also quite old and it works fine.

Thank you!

4 Likes

You had me with the tunnel effect! I love it!

Congratulations!

For performance, I suggest you run a profile in Edge or Chrome to get a precise analysis of the hot paths

1 Like

Thank you! I just updated version with many changes. Hope to go online soon.

Very nice!
Is it one scene or there are several of them?

Thank you! Here is final link btw: flying dog Workflow

These are two scenes and are switched at entering/leaving the monitor. this made it much easier to construct these different scenes at different scale.

Nice. I like these scrolling 3D experiences sites. You inspire me now to do something like this myself :smiley:

One thing I would say is that you should include some cut scenes if I can call them that. For example the transition from

to the monitor kinda feels like too much. I have to scroll a lot and I don’t gain much with each scroll. Fixes of dopamine are not there (haha).

I feel like there are several places like this in whole experience. So maybe you can think about the flow of each scroll, and what is important to see, and how long do I need to scroll to see the next section.

Nice one. Thanks for sharing.

.

1 Like

Oh you have that on arrows. Sorry. Yea, that’s nice :smiley:

yeah you can also grab the scroll bar - it is not hidden.
There are not so many sites like this so I first wanted to make a blog article about how I made this (starting from export from Blender,…) but just had not time for this unfortunately.

For me the most interesting part is how you bind page scrolling with 3D events (there are different ways to do it) and which problems you had (if any) and how they were solved :slight_smile:

I just put a very large DIV on top of Babylon scene with height of 25000px and 100% width which catches all mouse events.

Nice solution!
Currently I am trying scroll.js by @Pryme8 , it is very compact and convenient. Need also to give a try with ScrollMagic.js.
Here is forum link with small example - Animate Scene from Scroll Position EZPZ
And the full website scrolling example - https://digitalorigami.io/

If you need any help or revisions to the library let me know! I have been waiting for people to use it :wink:

1 Like

Do you have a screenshot of what you are trying to do cause there are a couple different setups you could have.

I think if you are talking about placing content at a certain place while other stuff scrolls takes a little math but it is doable. I just gotta figure out really what you need before I send you down the wrong path.

Well, so this is the example - scroll.js - Babylon JS Example 2
When you scroll, the heading “BJS Example 2” goes up and down slightly till it disappear. Is it possible to make this heading to sit still?

Hmm, dang it used to not do that. Yeah I can fix that. If it get some time today ill push an update.

Its fixed now, had to change the styling a little and how the callback worked.

Eventually here Ill post the updates for the system that has easing functions and hotspots for mouse/touch tracking.

1 Like

That is great! From my experience your script is the most convenient for BJS use.

It could technically handle any js value, but thank you sir <3