PRODUCT
Follow

Overview

The Parallax Reveal format is a responsive ad that utilizes a fixed background for “revealing” a different window into the background as the publisher page is scrolled up and down. At the top of the page, the top of the background image will be shown. Likewise, the tail end of the image will be shown at the bottom of the page.

The ad unit consists of multiple layers with different foreground and background elements that re-arrange when the size of the ad changes. The ad offers a parallax effect so that different layers can appear to move at different rates, creating an enhanced depth of field - pseudo 3d effect. A parallax effect is optional, but could be used to show an image like clouds moving in the background.

The following examples show what a Parallax Reveal ad looks like on a Sizmek test page. The first image shows the ad scrolled to the top of the page, showing the top portion of the background image, and with parallax-enabled clouds on the right.

top.png

The second image shows the ad scrolled to the bottom of the page, showing the bottom portion of the background image. The clouds have moved left toward the center. All other ad elements have remained in place.

bottom.pngAs you adjust the size of the browser window, the ad resizes responsively. The width will remain 100% (unless mdMaxBannerWidth or mdFixedBannerWidth are altered), and the height of the ad will be determined by your choice of Height Dependency.

The default for mdHeightDependency is adaptive, which uses a list of breakpoints to decide which of several ad heights to use based on the ad's width. The default mdBreakpoints is 0:250,900:400 which means that while the ad is 0px or wider, it will be 250px tall but when it is 900px or wider, it will be 400px tall.

If you resize your desktop browser or re-orient your tablet from landscape to portrait mode, the ad could dynamically change from one breakpoint to another, depending on your settings.

Other Height Dependency modes include Advertiser Div, which conforms the ad to whatever area the publisher allotted to it; Default, which conforms the ad to the dimensions specified at the placement level; AspectRatio, which sets the height relative to the width so that the aspect ratio remains constant; and Fixed, which keeps the ad at the fixed height you specify.

All of these modes can be over-ridden by fixed width and fixed height settings, and several can by min- and max-width and -height settings. For instance, if we're using aspect ratio and set it to 4:3, that would cause an filling the width of 1200px browser window to be 900px tall, but if our max height is 400px, the ad will stop growing vertically rather than conform to the aspect ratio: It will be 1200x400, in this example.

The foreground works like a rich media ad, and contains 1+ elements floating on top that can be clickable, as well as interactive elements like video and image galleries. Background images should be large enough to fill whatever screens you're targeting. You can provide separate images for portrait and landscape, and are encouraged to do so. If you don't, choose an image that can be cropped on the sides in portrait views and on the top & bottom in landscape views.

Parallax Reveal supports an In-App experience using the graceful fail: The user still gets a rich media experience even though the custom script can't be fully applied. Parallax objects won't scroll, and the background will be static relative to the ad, but all HTML elements will persist interactively, and you can add custom logic for this case.

Demos/Downloads

The following table provides links to the template and demo for the Parallax Reveal format.

Template

ParallaxReveal_2.1.0.zip

Demo

Preview demo

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 10+, Firefox, Chrome, Safari, Microsoft Edge

Mac

Safari, Firefox, Chrome

iPhone

iOS 8.0 and later

iPad

iOS 8.0 and later

Android Phone

Android 4.2 and later

Android Tablet

Android 4.2 and later

Format Properties

These are the common properties available to the format.

Feature Supported
Polite Loading
Safeframe Support
MRAID (in APP Support) 2
AdKit ready 1
Liquid (One-Tag Solution)
Secure Serving
Sizmek Advertising Suite Support
Ad Builder Templates Available

1 Allows for DCO Support as well as Additional Assets.

2 Graceful fail for MRAID so that the user still gets a rich media experience when the custom script can't be fully applied. Parallax objects won't scroll, and the background will be static relative to the ad, but all HTML elements will persist interactively, and you can add custom logic for this case.

Note: This format uses the HTML5 Polite Banner as the base format.

Implementing a Parallax Reveal Format

Before you Begin

Make sure you have the following resources available:

The Parallax Reveal format workspace that is applicable for your campaign. Download the workspace from the Formats & Features tab of the Creative Zone and extract it, preserving the directory structure.

Workspaces Available

Workspace

Banner Dimension

ParallaxReveal_2.1.0.zip

900x400

Included Template Files

HTML, JS & CSS

The following text-based template files are included:

File Name

Description

index.html

The ad file, with the ad configuration and initialization code

style.css

The style sheet for the ad and its elements

script.js

The javascript for the ad

config.js

A dummy config file for AdKit

localPreview.js

A script that makes it possible to preview the ad offline

localTesting.html

Open this in your browser to preview the ad offline.

Images

The following image template files are included in the images folder:

File Name

Description

images/backup.jpg

The image shown in unsupported browsers

images/background1.jpg

Background image for portrait mode

images/background2.jpg

Background image for landscape mode

images/logo.png

Sizmek logo image

images/hands.png

Hands image on the right side of the ad template

images/clickthrough.png

Image for click-through

images/cloud_PNG16.png

Cloud image that will animate from side to side

Utility Functions

These utilities functions are used at the creative level, in the script.js of the workspace.

Function Name

Description

setPRConfiguration

Invoke this function (without parameters) when the ad creative is ready to initialize the custom script on the platform.

setPRCallback

Use this function to trigger a callback function when the ad scrolls within certain area. The function accepts a single object as a parameter. The object must have the following properties:

name: the name of the function to call (string)

y1: the minimum scroll percentage to call the function (string)

y2: the maximum scroll percentage to call the function (string)

The scroll percentage is 0 when the top of the ad is at the bottom of the viewport, 50 when the ad is in the center of the viewport, and 100 when the bottom of the ad is at the top of the viewport.

For example:

setPRCallback({name: "showObject", y1: "31%", y2: "69%"});

The showObject function will be called when the ad is scrolled between 31 and 69% in the viewport.

setPRCallback({name: "hideObject", y1: "0%", y2: "30%"});
setPRCallback({name: "hideObject", y1: "70%", y2: "100%"});

The hideObject function will be called when the ad is scrolled between 0 and 30% in the viewport as well as between 70 and 100%.

Together, these three uses of setPRCallback create a system that shows the object in question whenever the ad is mostly visible and hides it the rest of the time.

parallax

Use this function to set up a parallax effect on an object, animating it as the ad scrolls. The function has the following parameters:

obj: The DOM element to animate. (object, required)

property: the property of that element to change (string, required)

start: the value of that property at 0% scroll (string, required)

end: the value of that property at 100% scroll (string, required)

duration: the time in seconds to spend animating the object each time the user scrolls (string, optional, default: 1.25s)

easing: the animation easing function to use (string, optional, default: ease-out)

The scroll percentage is 0 when the top of the ad is at the bottom of the viewport, 50 when the ad is in the center of the viewport, and 100 when the bottom of the ad is at the top of the viewport.

For example:

parallax(parallaxObject, 'left', '-20%', '120%');

The parallaxObject will animate from left:-20% to left:120% as the ad is scrolled from barely visible at the bottom of the page to barely visible at the top of the page.

parallax(parallaxObject2, 'left', '-60%', '140%');

The parallaxObject2 will animate from left:-60% to left:140% as the ad is scrolled from barely visible at the bottom of the page to barely visible at the top of the page.

Combined, the user will see parallaxObject2 move faster and farther than parallaxObject, giving the impression that parallaxObject2 is closer.

Note that a small parallax object at the top of your ad will be off-screen for the user when the ad is scrolled up so that only about half the ad is visible. The scroll percentage will only be around 75% at this point. Because the object's motion is defined relative to 0 and 100%, if you want it to move all the way from one extreme to the other while visible to the user, you'll need to use start and end values outside the bounds of your ad. Thus the percentages below 0 and above 100 in the above examples.

Customizing Parallax Reveal in HTML

To customize the Parallax Reveal, first open index.html in an HTML-authoring environment so you can edit/alter all the html elements within <body> tag in the index.html to create your own creative content.

Second, you may also want to make changes to the styles/style.css based on your content design.

Finally, open scripts/script.js in a JavaScript editing tool.

You can preview the look of your ad without uploading anything by opening scripts/localTesting.html in a browser. You will not see any ad-resizing logic in local preview, but you can test your parallax animation, setPRCallbacks, and basic interactivity. If you use a background image not named background1.jpg, you'll need to edit localTesting.html to see it.

Below are explanations of the variables and functions in the template.

Variables

Variable Name

Description

banner, clickThroughObject, contentObject, logoObject, parallaxObject, parallaxObject2

Global variable(s) used to locate DOM elements.

Add/Edit/Remove these variable(s) as you modify elements in index.html.

sdkData, adId, rnd, uid, aParallax, timeout

These variables store values that are necessary when running the ad.

Please do NOT make any change to these variables.

creativeId, creativeVersion, lastModified, lastUploaded, templateVersion

These variables store meta-data and have no effect.

Functions

This function will be triggered when ad is ready to play. So, we can put anything we want to show when the ad starts. Currently, we only have movingCloud function to trigger cloud animation for this template.

Function Name

Description

checkIfAdKitReady

Check to see if the adKit is ready and then proceed to initialize creative.

initializeCreative

Initialize the creative.

initializeGlobalVariables

This is where we initialize the global variables for HTML objects. In the template, we call setPRConfiguration here as well as any setPRCallback and/or parallax effects.

addEventListeners

This is where we add all the event listeners. In the template, we have added the click event for click throughs.

startCreative

Anything that you want to happen when the ad is ready, add it here. The template is ensuring that showObject is called when the ad is served in an MRAID environment.

registerInteraction

If you're adding dynamic user interactions, make explicit calls to them here, but never call this function. The platform will read this function to register possible interactions.

handleClickthrough

This is the handler for the click through click event.

showObject
hideObject

These functions animate the clickthrough object in or out. You can tweak, replace, or eliminate them according to your needs. You can trigger anything, animation or not.

responsiveAdContents

This function resizes the banner element to match the height of the ad itself. It's not recommended, but you can add additional functionality here to fire upon resize based on window.innerWidth and innerHeight.

gracefulFail

This function ensures the ad looks and behaves as well as possible in unsupported environments. The template calls showObject here so that the clickthrough will be visible, but you can change that. It sets a static background, which you should leave in place, but you could change the url.

revertFromGracefulFail

In rare occasions, gracefulFail fires prematurely. This function undoes its effects so that an ad loaded late can appear and perform normally.

Setting Up Parallax Reveal in Sizmek MDX

Sizmek MDX2.0 Setup

  1. Archive the Parallax Reveal workspace into a ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. In the Sizmek SAS, under Creative Assets, create new Workspace by uploading the ZIP file.
  3. Under the Ads section, create a new master ad.
  4. Set Ad Format to Parallax Reveal and fill out the form for the ad.
  5. Assign the workspace you uploaded and the default image from the images folder.
  6. Add the URL for the default click-through.
  7. Change any number of custom variables or keep the default.
  8. Save the ad.
  9. Create a new placement for the ad.
  10. Fill out the form. Set the Placement type to In Banner and the Banner size to 900x400.
  11. After you’ve saved your placement, you can then generate preview tags to test on your web site.

Custom Script Notice:

Since the Parallax Reveal format is an HTML5 Custom Format, there is no need to attach a custom script since the appropriate one will be pulled in automatically. For reference, the following custom script is being used:

Parallax_Reveal.js

Sizmek Advertising Suite Setup

  1. Archive the Parallax Reveal workspace into a ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. Click the Creative menu item > Asset Library, Upload your Workspace the chosen folder.
  3. Click the Creative menu item > Ads and click the New Ad button and select Blank Ad.
  4. Set Ad Format to Parallax Reveal and fill out the form for the ad.
  5. Under Creative Assets select Main Assets tab and then select the Workspace folder and default image.
  6. Add the URL for the default click-through.
  7. Change any number of custom variables or keep the default.
  8. Save the ad.
  9. Create a new placement for the ad.
  10. Fill out the form. Set the Placement type to In Banner and the Banner size to 900x400.
  11. After you’ve saved your placement, you can then generate preview tags to test on your web site.

Custom Script Notice:

Since the Parallax Reveal format is an HTML5 Custom Format, there is no need to attach a custom script since the appropriate one will be pulled in automatically. For reference, the following custom script is being used:

Parallax_Reveal.js

Custom Variables

Custom Variable Definitions

MDX 2.0

Sizmek Advertising Suite

Type

Description

Default Value

Accepted Values

mdHeightDependency

Height Dependency

String

How should the ad's height be determined. Available options are:

adaptive: The ad will use adaptive breakpoints to determine the height to use based on the width.

default: The ad will use the placement size.

fixed: The ad will use the fixed height custom variable. mdBannerFixedHeight must be set to a positive number or the ad will break.

advertiserDiv: The will use the size of the div where the publisher inserts the tag.

aspectRatio: The ad will set the height to match the width and the aspect ratio custom variable.

adaptive

adaptive,
default,
fixed,
advertiserDiv,
aspectRatio

mdAdaptiveBreakpoints

Adaptive Breakpoints

String

Used with mdHeightDependency:adaptive and/or mdChangeImgOnOrientation:false.

This is a comma-delimited list of width:height breakpoints. When the ad's width ≥ to the number on the left of the colon, it's height is set to the number on the right of the colon. The highest width matched in the list is used.

If mdChangeImgOnOrientation is false, the breakpoint used will also determine which background image is used.

0:250,900:400

width_integer: height_integer, width_integer: height_integer

mdBackgroundImagePath

Background Image Path

String

A comma-delimited list of one or two background image file paths to use as the ad's revealing background.

images/background1.jpg, images/background2.jpg

relative_path_to_image_one.jpg, relative_path_to_image_two.jpg

mdChangeImgOnOrientation

Change Image On Orientation

Boolean

If mdChangeImgOnOrientation is true, the ad will show the first image in portrait mode (and browser aspect ratios thinner than a square) but the second image in landscape mode (and browser aspect ratios wider than a square). If not, it will use mdAdaptiveBreakpoints to decide which image to display.

true

true, false

mdBannerAspectRatio

Banner Aspect Ratio

String

When mdHeightDependency is aspectRatio, this variable determines what that aspect ratio is.

4:3

integer(>0): integer(>0)

mdBannerFixedWidth

Banner Fixed Width

Integer

This forces the banner to the width specified.

It is inactive while 0 or negative.

This variable overrides all other width rules when active.

-1

any integer

mdBannerFixedHeight

Banner Fixed Height

Integer

This forces the banner to the height specified.

It is inactive while 0 or negative.

This variable overrides all other height rules when active.

-1

any integer

mdMinBannerWidth

Minimum Banner Width

String

If the banner's width would be narrower than the value specified here, it becomes this value.

You can set a pixel value or a percentage of the viewport width.

320px

integerpx or integer%

mdMaxBannerWidth

Maximum Banner Width

String

If the banner's width would be wider than the value specified here, it becomes this value.

You can set a pixel value or a percentage of the viewport width.

100%

integerpx or integer%

mdMinBannerHeight

Minimum Banner Height

String

If the banner's height would be shorter than the value specified here, it becomes this value.

You can set a pixel value or a percentage of the viewport height.

This variable overrides the adaptive, advertiserDiv, and aspectRatio height rules but not fixed or default.

0%

integerpx or integer%

mdMaxBannerHeight

Maximum Banner Height

String

If the banner's height would be taller than the value specified here, it becomes this value.

You can set a pixel value or a percentage of the viewport height.

This variable overrides the adaptive, advertiserDiv, and aspectRatio height rules but not fixed or default.

100%

integerpx or integer%

mdZIndex

ZIndex

String

When the ebDiv and adContainerFrame are resized, use this Z-Index.

2

any integer

mdIsProgEnabled

Prog Enable

Boolean

Whether or not to load the programmatic settings.

No

Yes, No

mdProgSettingsFolderPath

Prog Settings Folder Path

String

Location from which to load the programmatic settings files.

//services.serving-sys.com/programmatic/DomainList/

Path to liquid tool settings folder string

mdParentLevelsToResize

Parent Levels to Resize

Integer

How many parent elements to move up the dom tree and resize.

0

integer(>=0)

mdAutoRepositionInterval

Auto Reposition Interval

Integer

How often (in milliseconds) to reposition the ad based on resize behavior.

Not expected to be used.

0

integer(>=0)

mdBackupImgPath

Backup Image Path

String

Location from which to load a backup image for the ad.

undefined

Path to backup image string

 

Responsive Logic Summary:

There are a lot of variables that control the ad's potential width and height in different scenarios. Here's a run-down of how that logic works.

First, we determine the ad's width. If a fixed width is specified, we use that. Otherwise, we apply the maximum width to the viewport's width (so 80% of 1000px would give us 800px) and then apply the minimum width (if the width would be 290px at this point but the minimum is set to 320, the ad will be 320px). If the maximum width is smaller than the minimum width, the minimum width is used.

In this example, the ad would be 800px wide.

Second, we determine the ad's goal height, based on our height dependency mode, as described above.

Third, we determine the ad's actual height. If a fixed height is specified, we use that. Otherwise, if the height dependency isn't fixed or default, we apply the maximum height (perhaps 300px) and then apply the minimum height (if the goal height is 85px but the minimum is set to 20% and the viewport is 500px tall, the ad will be 100px). If the maximum height is smaller than the minimum height, the minimum height is used.

In this example, if the goal height from our height dependency was lower than 100px, the ad will be 100px. If it was between 100px and 300px, it will be exactly that number. And if the goal height was larger than 300px, the ad will be 300px.

A maximum height of 100% will allow the ad to match the viewport's entire height. For a particularly tall ad (perhaps with the aspectRatio height dependency and a aspect ratio of 1:4), this could be smaller than the ad's goal height. If you want the ad to be able to extend beyond the viewport, you could set a maximum height greater than 100% (perhaps 200%), though it is not recommended.

Common Customizations

Default Parallax Reveal

The default settings for each custom variable give you the most common usage of the format. mdHeightDependency:adaptive, pairs with mdAdaptiveBreakpoints:0:250,900:400 to give you an ad with height 250px on smaller screens and 400px on larger screens. mdMinBannerWidth:320px ensures your ad will never responsively scale below 320px wide and mdMaxBannerWidth:100% allows it to fill the screen's entire width. mdMinBannerHeight:0 and mdMaxBannerHeight:100% means we're not adding any additional limits on the ad's height. Finally, mdChangeImgOnOrientation:true combines with mdBackgroundImagePath:images/background1.jpg,images/background2.jpg to toggle between those two background images depending on the screen's orientation. The other custom variables are less commonly needed.

Remember you can easily apply setPRCallback and parallax within script.js to enable parallax motion behavior for a few visual elements in your design.

Simple Parallax Reveal

For the simplest Parallax Reveal, use mdHeightDependency:fixed and define mdBannerFixedWidth and mdBannerHeight to the dimensions you want the ad to always take. Set mdChangeImgOnOrientation:true and use one image for your background, mdBackgroundImagePath:images/background1.jpg. This will give you an ad that never changes dimensions but still reveals a background behind the page content as you scroll up and down.

Old Style Parallax Reveal

For ads built using the original Parallax Reveal before August 2017, set mdHeightDependency to adaptive, match mdAdaptiveBreakpoints and mdBackgroundImagePath to the breakpoints and images you had previously set and turn mdChangeImgOnOrientation off.

Reported Custom Interactions

Currently, no custom interactions are reported in the template, however, the developer can always add their own custom interactions by using the following call.

EB.userActionCounter();

Known Issues

  • On mobile phones, users may experience a choppy effect when scrolling.
  • In Safari Mobile on iOS 10 and 11, the contents of an unfriendly iFrame will be given margin:8px unless you set that page's body margin. margin:0px is recommended.
  • MDX2 and SAS platform Preview is unsupported (can be tested with tags).
  • Scroll detection does not work in MRAID or in Unfriendly iFrames.
  • Resizing and reorientation detection does not work in Unfriendly iFrames.
  • If an Unfriendly iFrame exists on the page even though the tag is served in a Friendly iFrame, the ad won't display correctly. The temporary fix until the regular custom format script has been updated is to add an extra plugin custom script as a preload event in the placement ad.
  • On a device with strained resources, there can be a lag between the background scrolling along with the ad.
  • When you set a very large minimum width, some browsers may partially ignore that at extremely narrow widths (<300px).
  • In IE10, sometimes the custom script fails to load, and the graceful fail experience triggers instead.
  • In the IAB MRAID test app, the SAS link fails to display in the Millenial SDK on Android devices, and both links fail to display in the Ad Marvel SDK on iOS.
  • Ads built using the legacy workspace from 2015 do not render correctly on older Mac Safari browsers and older Android Chrome browsers. The current workspace doesn't share this issue.

Change Log

August 28, 2017

  • Minor tweak for backwards compatibility.

August 22, 2017

  • Upgraded to use AdKit.
  • Added support for custom variables (previous release has not been utilizing them). Users are now able to customize the width and height of the banner (fixed, responsive, adaptive with breakpoints, etc.) as well as assign minimum and maximum dimensions directly on the platform.  Previously, the format had its width customized, but the height of the ad is now fully customizable as well.
  • By default, the ad now chooses its background image by browser orientation to help give a better experience in both portrait and landscape orientations.
  • Updated format to offer a fully "liquid" - "domain configurable" solution. This allows one tag to be served across different domains for which Certification and Support teams can use the "Domain Settings Admin Tool" to change custom variable values, JavaScript and CSS on specific domains, so that a single tag can work across multiple publishers / sections as expected. (Note: This has previously been referred to as a "programmatic" solution, but is more appropriate for PMPs and smaller networks that have been certified with Sizmek).
  • Added fallback experience for in APP (MRAID)
  • Added graceful fail so that the user still gets a rich media experience when the custom script can't be fully applied. Parallax objects won't scroll, and the background will be static relative to the ad, but all HTML elements will persist interactively, and you can add custom logic for this case.
  • Added parallax helper function to animate ad elements as the user scrolls the publisher page.
  • Added scroll detection relative to ad (0% when top of ad is at bottom of screen, 50% when ad is in the middle of screen, 100% when bottom of ad is at top of screen).

February 2, 2015

  • Added support for multiple Parallax Reveal ads run on the same publisher page.

March 12, 2014

Initial release

Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request

Comments