I am looking for a similar behaviour to that yes, however I have built my site as one long scrolling page. I was hoping instead that when the user scrolled there is a way to animate the viewport to scroll to the nearest anchor (an element with unique id) depending on the scroll direction.
The example I have linked below works just how I was hoping:
a setup using autoscroll to sections will only make sense when those sections are filling the whole viewport … OR you make sure that everything is within a viewport.
I’m not right sure how you did it …
hope it’ll work main codesnippets are copy pasted … source within code …
Thank you for creating an example file @h_classen this is a huge help!
I have taken a look and this is exactly how I was imagining it would work.
Also is there away way to change the animating scrolling speed?
Thank you again for your help, its really appreciated.
Based on your link to the “Pet Design” site another approach might be to use Scenes as your anchor. Functionally I think this concept would be equivalent to what you are after - with the benefit that scenes allow for tidier project (element) management… and You are still using a single page.
At the bottom of this post is the thread where I got the original project demo - I have made a few adjustments to it in the Hype project just below:
Note this is a demo of what I think You would find useful - You no doubt will need to do your own customizing.
Compared to the “original” found in the thread link at the bottom of this post I have:
1) Removed the jQuery Library as it did not appear to be necessary.
2) Removed the scroll bar from the entire HTML page - this can be put back in by commenting out (or removing) the CSS in the HTML Head. Note that this scroll bar could be useful, depending on your design, as it allows scrolling only in the current Scene.
3) Added some arbitrary graphic rectangles in the “First” Scene to show the use of a flexible layout.
Additional note: You have previously asked about controlling the speed of the scroll. If You look in the function “appLoad” which controls this scene-to-scene scrolling You will see the following code:
@JimScott Thank you for your very detailed reply and example document you created. I am very grateful for your help on this!
The scrolling response in your example is brilliant and works very well. I haven’t designed my site with separate scenes, but I’m sure this is something that I would be able to redesign.
Currently my existing project consists of one long page divided into sections either by coloured rectangle elements as backgrounds or full screen images, as I was looking to implement this site linked here: https://www.fb.se/
This site I have linked would be the perfect result of what I am looking to achieve. It looks to be one long page which scrolls to the next or previous section based on the mouse scroll direction, but also has full use of the scroll bar which over rides the scrolling animations when being used. It will also however scroll to the nearest section when the scroll bar is released if the user hasn’t fully centered it within the viewport.
I would be happy and am looking to redesign my site within separate scenes as I can also see other benefits for this, but would there be a away to have a scroll bar which can be used to scroll through all scenes as if one long page?
Also if possible is there any way of changing the scrolling animation between scenes like the linked example.
Please Note: In your original example that You sited twice before my posting (“The Pete Design”) there is no scroll bar.
It would be good for future questions to beware of how You phrase things - as You wrote previously…
i.e. the example was indicative of exactly how You wanted things to work.
If a scroll bar was important to your overall design it would be important to mention that fact - or any other variances from a given example - in your post(s).
Is there way to pin an object to the bottom of the viewport (like a Brand logo or such that needs to be fixed on the screen at the bottom) so that, in spite movement between Symbol 1 through 4, the object remains pinned 50 px from bottom of the screen? I tried doing this but each time the element takes the bottom of Symbol 4 as the bottom instead of the bottom of the viewport.