Parallax Web Banners

Advertising
1

Hi Guys,

I’m a Graphic Designer who has been tasked with building a Parallax 970x250 Web Banner for a client. This is to be deployed through OneAdserver (Adtech) and i’m looking for a bit of advice.

I know you can create scrolling parallax banners which play the timeline as you scroll on the banner but how do you make the banner scrub through the timeline as the user scrolls on the actual webpage?

http://gallery.smartadserver.com/parallax - this is what im looking to build ( You’ll need to turn your adblocker off to see! )

Any help would be appreciated.
Cheers!

2

If there is no API for this kind of behaviour within the template, my guess would be that it is going to be very tricky.

You probably need to get the full height of the page and do a check where the user is at any point during his visit and adjust the time of the animation based on that position (relative to the total height).

The challenge is going to be:

  • how ‘deep’ is your banner in terms of iframe in iframe in iframe in iframe, etc
  • how accessible is the page information from within your iframe
  • where and how is the banner position based on the page (also taking into account responsiveness)

Tricky tricky. I’m sorry I can’t really help you, but I’m eager to see what other people can come up with. Is there a template we can have a look at (the template from Adtech for instance).

1 Like
3

Off the top of my head I would say

  1. get a value based off the scroll position (ex. scrollTop / 700) by running a script on your webpage.
  2. use Hype's hypeDocument.goToTimeInTimelineNamed(amount, 'yourTimeline'); where amount is the value you got in 'a'.
  3. Use the global Hype object to access the document from outside aka. a web page it's embedded in.
    e.g HYPE.documents['documentName'].goToTimeInTimelineNamed(amount, 'yourTimeline');
    Tumult Hype Documentation

This is just a theory and haven't tested. Your timeline and/or amount would have to be adjusted to get the right speed in comparison to the web page scroll. The trick is to know where the "banner" is so you can offset the amount by x seconds (amount-x) if it's way down the page for example.

1 Like