Help Center Ad Gallery

Parallax Ad

This template is for an image ad with a parallax effect. The chosen ad image will display differently as you scroll down or up. The animation effect is done with JavaScript, CSS and HTML.

Demo

View a parallax ad.

Sample Code

<AdSpeed:Load:Parallax/>    

<a href="https://example.com/">
<div style="height:300px;width:100%;margin-top:20px" 
data-image-src="https://www.adspeed.com/mp4/BigBuckBunny.png" 
data-natural-width="1000" data-natural-height="563"
data-parallax="scroll" data-position="top" data-bleed="10"></div>
</a>

Customization

To customize the demo ad to your own version, change the image URL, the ad dimension and the click URL. Additional settings are available as provided by the JavaScript library parallax.js.

Create the ad

  • Click on the menu Ads / Create a new ad and choose the ad type to be Rich-Media/HTML
  • Paste the HTML code from the demo ad into the code box
  • Customize the ad content to your own and Save the ad

Other Articles in Ad Gallery

This section provides demo, sample and instructions for the most common and popular ad creative templates. Click on a template link to view the description, demo and instructions to create in the ad server, customize it to suite your purpose and integrate the ad with your platform.

Cannot find an answer for your question? Ask our Customer Care team

Related