Change scenes by scrolling


(thomas wosch) #1

hello,
is it possible to go from one scene to another by scrolling the mouse down or up? I think I would need java script. do you have an example?
thank you
thomas


Auto-Scroll to next anchor on Mouse-wheel movement
Unload / Disable Javascript "On Layout Load"
(Andrew) #2

You can do this now, of a sort. But you cannot, easily, step the process.

You can bind a mouse wheel event and use pushBottomToTop scene transition.

So you would create a function on the first scene loading. I call it appLoad:

if (window.addEventListener) {
	window.addEventListener("mousewheel", scrollScene, false);
}

function scrollScene(e){

var upORdown = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

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

And bingo, here is a working example:

scrollingScenes.hype.zip (99.4 KB)


(strmiska) #3

this is cool - but there´s a problem with the logically scrolling direction.
if i want to scroll to scene 2, i have to move the wheel up and the scene should load from bottom to top.
so i changed:

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


#4

Thanks @MrAddy & @strmiska

Here’s a tutorial for controlling a timeline, which can be modified to jump to a scene: http://blog.tumult.com/2014/08/06/tutorial-easily-create-parallax-effects-and-single-page-scrollable-experiences-in-tumult-hype/


(thomas wosch) #5

thank you andrew and strmiska,

works great. but not on firefox :frowning:
I cant code. so do you have an idea.
thank you
thomas


(strmiska) #6

true - doesn´t work on firefox. sorry, i don´t have a solution right now.


(Steve Flowers) #7
window.addEventListener("mousewheel", scrollScene, false);
window.addEventListener("DOMMouseScroll", scrollScene, false);

I haven’t tested and the values might be reversed. But the second event listener is supposed to be the Firefox equivalent.


(thomas wosch) #8

thank you, I will try to edit it into js!


(strmiska) #9

thanx - it´s working:

if (window.addEventListener) {
	window.addEventListener("mousewheel", scrollScene, false);
	window.addEventListener("DOMMouseScroll", scrollScene, false);
}

function scrollScene(e){

var upORdown = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

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


}

(David Guillermo Escalante Trinidad) #10

I have a question for this code. Is it possible to “unload” the script so when I reach certain page the “jump scene” with the scroll mouse stop working?


#11

You would need to use removeEventListener and whenever / wherever you want to remove it use:

window.removeEventListener("mousewheel", scrollScene);
window.removeEventListener("DOMMouseScroll", scrollScene);

#12

hello,
i have make a animation with multi scene with the function scrollScene than is launch in the load of the first scene.
but when i use exactly
window.removeEventListener(“mousewheel”, scrollScene);
window.removeEventListener(“DOMMouseScroll”, scrollScene);

it doesn’t work, the scrollScene is alway active.

have you an idea.
thank you.


(Gary Tamblyn) #13

The tutorial is great, I’ve been hoping for scroll wheel functionality in hype for a long time. Unfortunately it seems a bit sporadic, sometimes it scrolls in the correct direction, other times it goes the wrong way, which is a real shame. Any plans to put a more bullet proof version in the next release of Hype ?