Submit a request
PRODUCT
Privacy Policy  |  Terms of Use
Follow
Last Update:
  viewable by end users
  editable by agents

Note

Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About Parallax Reveal.

Creating an Ad Using a Sizmek Ad Suite Template

When creating a Parallax Reveal in a code editor, it is recommended that you start with our official template bundle.

Files within the Bundle:

README.txt

Amz_ParallaxReveal_1_0_0.zip

Amz_ParallaxReveal_1_0_0_DCO.zip

You can also customize the template to fit a variety of dimensions. including responsive dimensions, according to your requirements. Everything can be personalized, including animation and graphical elements.

Included Files

The following table describes the list of files that are included in the downloadable template.

File Name

Description

Required

index.html

HTML file for the banner.

Required

config.js

Configuration/Manifest file for the ad. Used for actions such as default ad settings, and Dynamic Creative.

Required

styles/reset.css

Resets the native styles of the browser so that the ad can look as intended.

Optional

styles/style.css

Style sheet for the banner and its HTML elements.

Optional (if code is included in the HTML file)

scripts/script.js

JavaScript (logic and tracking) for the banner.

Required

scripts/localPreview.js

Script that enables local preview of the ad.

Optional

scripts/localPreview.html

An HTML document that can be open locally to test the ad before upload.

Optional

images/backup.jpg

Fallback image shown in unsupported browsers.

Required

images/background1.jpg

Demo Background Image 1

Optional

images/background2.jpg

Demo Background Image 2

Required

Setting up Your Ad in Sizmek Ad Suite

After you finish creating your ad, proceed to setting up your ad in SAS. For more information, see Set up a Parallax Reveal.

Additional Resources

Shared Libraries

If you are developing ads with 3rd party libraries, we recommend that you call these libraries from a CDN (Content Delivery Network) when possible. This will help improve loading time and caching.

Dynamic Creative Optimization

If you need to add dynamic creative optimization (DCO) elements to your creative, see Add Dynamic Elements to Your HTML Ads Using a Code Editor.

Advanced Configuration

The Parallax Reveal uses a combination of custom scripts, responsive design, and JavaScript functions to create the parallax and reveal effect. The following is a step-by-step procedure and a list of functions and variables used to achieve your animation effect.

Customize the Template

Follow this procedure to customize theParallax Reveal.

Procedure

  1. Open the uncompressed Workspace in an HTML code editor.

  2. To create your own creative content, edit the index.html file to modify the HTML entities found in the <body> tag.

  3. Edit the styles/style.css file to modify the CSS to produce the responsive effect and styling.

  4. Edit the scripts/script.js file that contains the functions to achieve the animated effects. For more information, see Parallax Functions.

Customize the Design and Layout

To customize the design and layout of the ad, edit the index.html and styles/style.css files by adding, removing, or customizing the elements and their styles as required. The Parallax Reveal format supports responsive ad design, which you should consider when modifying these elements.

Customize the Parallax Animation

You use JavaScript code in the template to achieve parallax animation in the banner. The template synchronizes with the page's scroll using a series of functions and event listeners. The main functions are setPRCallback and parallax.

Parallax Functions

The following functions are found in the scripts/script.js file and used to achieved the parallax animation effect. In general, the setPRCallback function is used to call a function at a certain scroll percentage, and the parallax function is used to animate HTML elements over a scroll percentage range.

Function Name

Description

setPRConfiguration

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

setPRCallback

Registers an event when a function will be called depending on the scroll amount of the ad. The function accepts a single object as a parameter, which contains the function name and the start and stop percentages, as described in the following table.

Parameter

Description

Type

name

Name of the function to call.

String

y1

Minimum scroll percentage (between 0 and 100) to call the function.

String

y2

Maximum scroll percentage (between 0 and 100) to call the function.

String

The range of y1 and y2 represent when the top of the ad is at the bottom of the viewport (0) and the bottom of the ad is at the top of the viewport (100).

For more information, see setPRCallback.

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.

Parameter

Description

Type

Required

obj

DOM element to animate

Object

Required

property

Property of the element to change.

String

Required

start

Value of the property at 0% scroll.

String

Required

end

Value of the property at 100% scroll.

Strong

Required

duration

Time, in seconds, to spend animating the object each time the user scrolls.

Default value: 1.25 seconds

String

Optional

easing

Animation easing function to use.

Default: ease-out

String

Optional

setPRCallback

setPRCallback(parameters:Object);

In the following example, the function hideObject will be called between the ranges 0% - 30%, the showObject in the range of 31% - 69%, and hideObject again in the range of 70% - 100%. The animated effect culminates in the element click-through animating on screen between 30% - 69% and off screen again when it leaves.

Any function can be assigned using this technique to create the required animation effect. The functions showObject and hideObject are custom functions and you can modify them or even use your own functions for a variety of effects.

Note

Note: The function assigned to a range is called continuously in that range on each page scroll event. Functions assigned with this technique should be coded to avoid issues when called multiple times.

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

Parameter

Description

Type

name

Name of the function to call.

String

y1

Minimum scroll percentage (between 0 and 100) to call the function.

String

y2

Maximum scroll percentage (between 0 and 100) to call the function.

String

Parallax

parallax(
    obj:Object,
     property:String,
     start:String,
     end:String,
     duraton:String,
 easing:String
);

Parameter

Description

Type

Required

obj

DOM element to animate

Object

Required

property

Property of the element to change.

String

Required

start

Value of the property at 0% scroll.

String

Required

end

Value of the property at 100% scroll.

String

Required

duration

Time, in seconds, to spend animating the object each time the user scrolls.Default value: 1.25 seconds

String

Optional

easing

Animation easing function to use.Default: ease-out

String

Optional

The following example from the template shows how to use the parallax function to add element-panning animation based on scroll rates to achieve a parallax effect in the ad. The template animates two DOM elements named parallaxObject and parallaxObject2 across the banner as the ad scrolls up and down the page. The following code registers those elements along with what CSS property to modify and from what ranges:

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

In this example the DOM element parallaxObject has a CSS property left animated from -20% to 120% as the ad scrolls up the page. And similarly, the DOM element parallaxPbject2 has a CSS property left animated from -60% to 140%. The parallax function will animate these elements towards the left and across the banner at different rates giving a depth of field, or parallax effect, to the animation.

A variety of elements can be animated in this manner with a variety of CSS values. For instance, top can be used to animate elements up and down the banner as the ad scrolls past.

Note

Note: The same elements can have multiple CSS properties changed by duplicating the call and updating the CSS property to the second property. However, only the last property added in this way will have a smooth transition applied to it since the transition CSS property is set to the last assigned property passed to the function.

For instance calling the following will result in only the top property having a smooth animation and the left property having no transition:

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

Important: Do not edit the function named parallax in the template - or any of the functions listed in the library section of the template - as this may cause unintended results.

Additional JavaScript Variables and Functions

Variables

The following variables are defined in the scripts/script.js file and are used in the default code. You can edit these variables as required, but confirm which parts of the code rely on them before modifying them.

Variable Name

Description

Type

Editable

  • banner

  • clickThroughObject

  • contentObject

  • logoObject

  • parallaxObject

  • parallaxObject2

Global variables used to locate DOM elements.

Add, edit, or remove these variables as you modify elements in the index.html file.

String
DOC_tick.gif

  • timeout

  • SdkData

  • aParallax

  • adId

  • rnd

  • uid

These variables store values that are necessary for the ad to run properly after the upload to SAS.

Important

Important: Do not make changes to these variables.

String
DOC_tick.gif

  • creativeId

  • creativeVersion

  • lastModified

  • lastUploaded

  • templateVersion

These variables store metadata and have no effect.

Boolean
DOC_cross_blue.jpg

Creative Functions

These are functions in the scripts/script.js file that are used for code initialization, event listeners, animation triggers, as well as click and interaction handlers. You can use these functions in addition to those listed as Utility Functions.

Function Name

Description

Additional Code Allowed

checkIfAdKitReady

Checks to see if the AdKit is ready, and then proceeds to initialize creative.
DOC_cross_blue.jpg

initializeCreative

Initializes the creative.

You can add your own script if you want to run a script when the creative is initialized.
DOC_tick.gif

initializeGlobalVariables

Initializes the global variables for HTML objects. In the template, positionAdElements is also called to position the ad elements.
DOC_tick.gif

addEventListeners

Adds all of the event listeners. In the template, the click event for the click-through and user action counter was added. In addition, the webkitendfullscreen event listener for iOS devices was added in order to handle some positioning issues when exiting the full screen video player.
DOC_tick.gif

startCreative

Add all actions that are required when the ad is ready. The template ensures that showObject is called when the ad is served in an MRAID environment.
DOC_tick.gif

registerInteraction

If you add dynamic user interactions, use this function to make explicit calls to them, but never call this function. SAS reads this function to register possible interactions.
DOC_tick.gif

handleClickthrough

Handler for the click-through click event.
DOC_tick.gif

showObject

hideObject

Animate the click-through object in or out. You can tweak, replace, or eliminate them as required. You can trigger anything, animation or not.
DOC_tick.gif

responsiveAdContents

Resizes the banner element to match the height of the ad itself. It not recommended, but you can add additional functionality here to fire upon resize based on window.innerWidth and innerHeight.
DOC_tick.gif

gracefulFail

Ensures that the ad looks and behaves as well as possible in unsupported environments. The template calls showObject here so that the click-through will be visible, but you can change that setting. Additionally, it sets a static background, which should remain, but you can change the URL.
DOC_tick.gif

revertFromGracefulFail

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

Utility Functions

There are a variety of other functions and code in the scripts/script.js file that you should only modify if you have experience in JavaScript coding. The creative and custom scripts rely on these functions to perform properly and are sensitive to modification.

Function Name

Description

Can contain additional code?

parallax

Used by the creative to add HTML elements to the list of elements to be animated.
DOC_cross_blue.jpg

onPageScroll

Used by the creative to animate the elements added by the parallax function. You can add additional code to this function that needs to be linked to the page scroll event.
DOC_tick.gif

setPRConfiguration

Used by the ad to initialize the custom script.
DOC_cross_blue.jpg

setPRCallback

Used by the creative to set the functions that will be called at specific page scroll heights.
DOC_cross_blue.jpg

setCreativeVersion

Used by the ad to initialize the custom script.
DOC_cross_blue.jpg

sendMessage

Used by the ad to communicate with the custom script.
DOC_cross_blue.jpg

addCustomScriptEventListener

Used by the ad to communicate with the custom script.
DOC_cross_blue.jpg

dispatchCustomScriptEvent

Used by the ad to communicate with the custom script.
DOC_cross_blue.jpg

removeCustomScriptEventListener

Used by the ad to communicate with the custom script.
DOC_cross_blue.jpg

eventManager

Used by the ad to communicate with the custom script.
DOC_cross_blue.jpg

Demo

Click here to preview a demo of Parallax Reveal format.

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

Comments