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

  • Campaign
    "Documentation for API methods to manage your campaigns in our ad server. API Version1.3.9 (build 20210315). This page was updated ..."
  • Website
    "Documentation for API methods to manage one or multiple websites. API Version1.3.9 (build 20210315). This page was updated on Fri, ..."
  • Sticky Ad
    "This template is for an image ad with a sticky effect. The ad will stick and stay visible even when ..."
  • Grid-of-Images Ad
    "This template is for an ad with multiple images and text links in a table. You can have multiple columns ..."
  • Grid-of-Buttons Ad
    "This template is for an ad with multiple clickable buttons in a table. You can have multiple columns and rows ..."