Hi!
We are interested in creating some Google Parallax ad but don’t know how to set it up in Hype, currently using Hype 4. Google only provided instruction on Google ad designer, (https://support.google.com/displayvideo/answer/9020683?hl=en) and we would like to create them using Hype instead.
Can anyone give some idea or knowledge on this?
Thank you!
Google Web Designer uses a javascript file called “gwdparallax_min.js” that helps provide the parallax ability. Specifically, in looking at the output, it hooks into an event to get the scroll position from the host page:
Enabler.isServingInLiveEnvironment() ? Enabler.addEventListener(studio.events.StudioEvent.HOSTPAGE_SCROLL, this.g, !1) : window.addEventListener("message", this.g, !1);
I can’t find specific documentation on this event and unfortunately their javascript is minified which makes it a bit harder to figure out the best way to use it.
A more generic solution would be like what @michelangelo pointed you to, with the caveat that most ads are served within an iframe, so you can’t get the scroll position so easily. First, I don’t think you can hook into the window.onscroll event since that will be looking at the wrong window. You may instead need to use a timer, which isn’t so pretty. To get the scroll position, I’d instead do something like a window.parent.parent.parent.scrollY to ensure you get the scroll of the top of the page. You’d also need to find your own offset.
I hope this may point you in a direction - basically it will need some amount of JavaScript and a lot of testing in ad environments.