Parallax scroll horizontally

Using JavaScript with Hype
#1

Hi everybody,
I used this javascript for the parallax scroll vertically and it works perfectly:

windows.onscroll = function () {

	var scrollAmount = scrollY
	hypeDocument.goToTimeInTimeLineNamed(scrollAmount * 0.006, 'animation');
}

I know little about Javascript, but I assume that this code has simply altered the time of the new scroll (scrollAmount) compared to the default scroll... is it right?

My question is: How can i use the same effect horizontally?
Thank you in advance
:rotating_light: Please note that we can only address JavaScript questions and issues in the context of Tumult Hype, so please attach a Hype document so others can dig into what you have so far.

1 Like
#2

The key part is this... hypeDocument.goToTimeInTimeLineNamed ...that's not really scrolling. It's just changing the time in the timeline... like skipping to a different part of a movie.

The scroll part appears to be related to the "window.onscroll" (are you sure it's "windows"?) JavaScript event. Where does "scrollY" come from? The "Y" value is typically up and down. "X" would be left and right.

If I wanted my Hype Document to respond to scroll events, I'd likely write it differently. Here's an example from the "Webpage" template...

 if (!window.menustart) {
      document.addEventListener("scroll", scrolling);
 }

First, I add an event listener to "scroll" events. When that event occurs, the custom "scrolling" function is run. This event listener is inside a condition, as I only want to run the event listener once. (If the scene is reloaded, that might duplicate... triplicate... quadruplicate... etc... the event listener. Also, the condition is specific to the "Webpage" project. If you want to protect your project from running the same event listener multiple times, you'll need your own condition to check for or a different way to manage event listeners.)

 function scrolling(e) {
      var s = document.getElementsByTagName("html")[0].scrollTop;
      if (s > menustart) {
           window.menu.setAttribute("data-sticky", "true");
           hypeDocument.setElementProperty(
                window.menu, "top", 0
           );
      } else {          
           window.menu.setAttribute("data-sticky", "false");
           hypeDocument.setElementProperty(
                window.menu, "top", menustart
           );
      }
 }

In my function, I'm controlling the custom data attribute value on an element. Here, it seems you want to control a timeline... and you want to do that horizontally. So, I'm thinking that you'd want to grab the horizontal scroll value and then update your Hype scene based on that value.

Here's how you get the horizontal scroll value...

In Hype-Land, it's basically... hypeDocument.getElementById("ID").scrollLeft ...where "ID" is the ID name of the element that has the horizontal scrollbar.

2 Likes
#3

Yes, it's "window"... I was wrong to write. I don't really know what is scrollY, i saw it here