Auto-Scroll to next anchor on Mouse-wheel movement

Using JavaScript with Hype
10

Hi Ollie!

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:

scrollingScenes_JHS.hype.zip (19.0 KB)

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:

if(upORdown === 1){
		hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom, 2.1)
	}else{
		hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushBottomToTop, 2.1)
	}

Simply change the the "2.1" (which is seconds) in this code to another number.

Original thread:

3 Likes