Single File Expanding Ad
A single expanding banner format consists of collapsed part (smaller size) and on tap/click, the ad expands to wider/higher instance. The expanded banner can offer video and other rich media experience. The expanded part accommodates a link to the predefined landing page. The ad maintains expanded size until the “Close” button is clicked.
Single Expanding Component
In order to start with the Single Expanding Component, it has to be loaded to your document:
<script> var preloadQueue = [ 'SingleExpanding' ]; document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>'); </script>
For a complete Single Expanding Component setup, the user may define additional seetings. These settings, however, are optional and have default values.
Description: Collapsed member x coordinate. The value cannot be smaller than 0 and higher than whole asset width minus collapsed part width.
Description: Collapsed member y coordinate. The value cannot be smaller than 0 and higher than whole asset height minus collapsed part height.
Description: Collapsed member width.
Description: Collapsed member height.
Description: Expand animation easing function. The animation depends of expand time.
Description: Collapse animation easing function. The animation depends of collapse time.
Description: Expand animation duration in seconds.
Description: Collapse animation duration in seconds.
expandEasing and collapseEasing properties are used to set animation easing type. User can pass his own easing function or use one of the following static properties:
var SingleExpanding = Adform.Component.SingleExpanding; var index = Math.floor(Math.random() * 15); var easing = [ SingleExpanding.regularEaseIn, SingleExpanding.regularEaseOut, SingleExpanding.regularEaseInOut, SingleExpanding.backEaseIn, SingleExpanding.backEaseOut, SingleExpanding.backEaseInOut, SingleExpanding.strongEaseIn, SingleExpanding.strongEaseOut, SingleExpanding.strongEaseInOut, SingleExpanding.bounceEaseIn, SingleExpanding.bounceEaseOut, SingleExpanding.bounceEaseInOut, SingleExpanding.elasticEaseIn, SingleExpanding.elasticEaseOut, SingleExpanding.elasticEaseInOut ][index];
SingleExpanding.on() and SingleExpanding.off() methods should be used to add or remove single expanding event listeners. All the available events are listed below.
Event Meaning SingleExpanding.EXPAND_START Value: 'expandStart'
Description: Event is emited on expand start.
SingleExpanding.EXPAND_END Value: 'expandEnd'
Description: Event is emited on expand end.
SingleExpanding.EXPAND_UPDATE Value: 'expandUpdate'
Description: Event is emited on expand update.
SingleExpanding.COLLAPSE_START Value: 'collapseStart'
Description: Event is emited on collapse start.
SingleExpanding.COLLAPSE_END Value: 'collapseEnd'
Description: Event is emited on collapse end.
SingleExpanding.COLLAPSE_UPDATE Value: 'collapseUpdate'
Description: Event is emited on collapse update.
Code snippet example