Note
Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About Parallax Reveal.
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.
The following table describes the list of files that are included in the downloadable template.
File Name |
Description |
Required |
---|---|---|
|
HTML file for the banner. |
Required |
|
Configuration/Manifest file for the ad. Used for actions such as default ad settings, and Dynamic Creative. |
Required |
|
Resets the native styles of the browser so that the ad can look as intended. |
Optional |
|
Style sheet for the banner and its HTML elements. |
Optional (if code is included in the HTML file) |
|
JavaScript (logic and tracking) for the banner. |
Required |
|
Script that enables local preview of the ad. |
Optional |
|
An HTML document that can be open locally to test the ad before upload. |
Optional |
|
Fallback image shown in unsupported browsers. |
Required |
|
Demo Background Image 1 |
Optional |
|
Demo Background Image 2 |
Required |
After you finish creating your ad, proceed to setting up your ad in SAS. For more information, see Set up a Parallax Reveal.
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.
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.
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.
Follow this procedure to customize theParallax Reveal.
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.
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.
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
.
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 |
||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Invoke this function (without parameters) when the ad creative is ready to initialize the custom script in SAS. |
||||||||||||||||||||||||||||
|
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.
The range of For more information, see setPRCallback. |
||||||||||||||||||||||||||||
|
Use this function to set up a parallax effect on an object, animating it as the ad scrolls. The function has the following parameters.
|
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%"});
parallax( obj:Object, property:String, start:String, end:String, duraton:String, easing:String );
Parameter |
Description |
Type |
Required |
---|---|---|---|
|
DOM element to animate |
Object |
Required |
|
Property of the element to change. |
String |
Required |
|
Value of the property at 0% scroll. |
String |
Required |
|
Value of the property at 100% scroll. |
String |
Required |
|
Time, in seconds, to spend animating the object each time the user scrolls.Default value: 1.25 seconds |
String |
Optional |
|
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.
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 |
---|---|---|---|
|
Global variables used to locate DOM elements. Add, edit, or remove these variables as you modify elements in the |
String |
![]() |
These variables store values that are necessary for the ad to run properly after the upload to SAS. |
String |
![]() |
|
These variables store metadata and have no effect. |
Boolean |
![]() |
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 |
---|---|---|
|
Checks to see if the AdKit is ready, and then proceeds to initialize creative. |
![]() |
|
Initializes the creative. You can add your own script if you want to run a script when the creative is initialized. |
![]() |
|
Initializes the global variables for HTML objects. In the template, |
![]() |
|
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 |
![]() |
|
Add all actions that are required when the ad is ready. The template ensures that |
![]() |
|
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. |
![]() |
|
Handler for the click-through click event. |
![]() |
|
Animate the click-through object in or out. You can tweak, replace, or eliminate them as required. You can trigger anything, animation or not. |
![]() |
|
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 |
![]() |
|
Ensures that the ad looks and behaves as well as possible in unsupported environments. The template calls |
![]() |
|
In rare occasions, |
![]() |
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? |
---|---|---|
|
Used by the creative to add HTML elements to the list of elements to be animated. |
![]() |
|
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. |
![]() |
|
Used by the ad to initialize the custom script. |
![]() |
|
Used by the creative to set the functions that will be called at specific page scroll heights. |
![]() |
|
Used by the ad to initialize the custom script. |
![]() |
|
Used by the ad to communicate with the custom script. |
![]() |
|
Used by the ad to communicate with the custom script. |
![]() |
|
Used by the ad to communicate with the custom script. |
![]() |
|
Used by the ad to communicate with the custom script. |
![]() |
|
Used by the ad to communicate with the custom script. |
![]() |
Click here to preview a demo of Parallax Reveal format.
Comments