17 Replies
David Crocker

I am a javascript newbie, but I have a partial solution. So far I can only get it to work in Chrome and Edge.

This javascript will monitor the mouse wheel and adjust a variable:

var player=GetPlayer();

window.addEventListener('wheel', function(e){

var scrollCount = player.GetVar("Dial1");

if(e.wheelDelta<0 && scrollCount<0){
scrollCount++;
}

else if(e.wheelDelta>0 && scrollCount>-360){
scrollCount--;
}

player.SetVar("Dial1",scrollCount);
});

I have used this to move a dial using the mouse wheel. The range of the variable needs to be set in line 4 (highest value 0) and line 7 (lowest value -360). These correspond to Start value -360 and Initial value 0. my dial worked backwards.

You could set the slide to move on when the variable gets to a certain number with a Jump to Slide trigger.

If someone can help me get it working in IE that would be great.

Harsh Joshi

Hi David,

Thanks for your inputs it was really helpful to us.

we have achieved what we were looking for but we are facing just one issue that is for slide transition. 

Basically we are trying to make one pager style in Storyline, so when we scroll down to next slide the transition goes upward, but if we scroll up to previous slide then again as a transition it move upwards.

so can we play with some JAVA for slide transitions, that is if we scroll down the transition goes upward and if we scroll up the transition goes downward.

it will be a great help if we get solution for this slide transition effects.

 

Regards

David Crocker

 As Phil says you can't control the transitions with JavaScript. I like the suggestion of duplicate slides.  

I'm guessing you want to scroll  the page up and down with the scroll wheel like a web page? If this is the case then you might be better to try this in Rise if you have an Articulate 360 subscription. It will give you that ability natively (no javascript).

Are you able to share a file with me so I can see what you are trying to do? 

 

And Zand

First thanks to David for a brilliant idea. With that variable we can reproduce many css/js like animations they use in web design. As for the idea to create a one slider, you would probably want to use a scrolling panel and place a tall object inside. See the file attached.

And Zand

It is best to remove the eventListener when leaving the slide, because when revisiting the slide it will run a new eventListener so the variable will be updated from both listeners. Here is a solution:

var player=GetPlayer();

var scrollCount = player.GetVar("scroll", scrollCount);

function scrollCounter(e){
if(e.wheelDelta<0 && scrollCount<59){
scrollCount++;
}

else if(e.wheelDelta>0 && scrollCount>0){
scrollCount--;
}

else if(scrollCount == 59){
window.removeEventListener('mousewheel', scrollCounter);
}

player.SetVar("scroll",scrollCount);

}

window.addEventListener('mousewheel', scrollCounter);

It's possible to remove the listener with the next button or any other.

Math Notermans

Although i didnot finish this completely, the concept of a OnePage with mousewheel control ( even on Edge, IE or Firefox ) is working properly.
https://360.articulate.com/review/content/0381f6c9-6baa-45e2-b5d8-375fa803ffa1/review
Although it does look like a One Page Website, it in fact are multiple Storyline line slides, controlled by GSAP ScrollTrigger ( https://greensock.com/scrolltrigger/ )

opa