Create a Parallax Reveal in a Code Editor – Sizmek Help Center

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

Open the uncompressed Workspace in an HTML code editor.
To create your own creative content, edit the index.html file to modify the HTML entities found in the <body> tag.
Edit the styles/style.css file to modify the CSS to produce the responsive effect and styling.
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

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

creativeId
creativeVersion
lastModified
lastUploaded
templateVersion

These variables store metadata and have no effect.

Boolean

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.
`initializeCreative`	Initializes the creative. You can add your own script if you want to run a script when the creative is initialized.
`initializeGlobalVariables`	Initializes the global variables for HTML objects. In the template, `positionAdElements` is also called to position the ad elements.
`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.
`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.
`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.
`handleClickthrough`	Handler for the click-through click event.
`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.
`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`.
`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.
`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.

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.
`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.
`setPRConfiguration`	Used by the ad to initialize the custom script.
`setPRCallback`	Used by the creative to set the functions that will be called at specific page scroll heights.
`setCreativeVersion`	Used by the ad to initialize the custom script.
`sendMessage`	Used by the ad to communicate with the custom script.
`addCustomScriptEventListener`	Used by the ad to communicate with the custom script.
`dispatchCustomScriptEvent`	Used by the ad to communicate with the custom script.
`removeCustomScriptEventListener`	Used by the ad to communicate with the custom script.
`eventManager`	Used by the ad to communicate with the custom script.

Demo

Click here to preview a demo of Parallax Reveal format.

Note

Creating an Ad Using a Sizmek Ad Suite Template

Included Files

Setting up Your Ad in Sizmek Ad Suite

Additional Resources

Shared Libraries

Dynamic Creative Optimization

Advanced Configuration

Customize the Template

Customize the Design and Layout

Customize the Parallax Animation

Parallax Functions

setPRCallback

Note

Parallax

Note

Additional JavaScript Variables and Functions

Variables

Important

Creative Functions

Utility Functions

Demo

Comments