This article will walk you through building an ad using the Banner Format with a Parallax Animation set on the background image. Also see Parallax Scroll Animation and Parallax Carousel articles for more examples.
* Parallax units vary greatly depending on site and where they are to be placed on the site (where the container is set up), so be sure to contact email@example.com to test prior to your first campaign. Also applies to site re-design or if different sections of your site are set up differently - please contact us to test before going live with a campaign.
**Trigger points will depend on where the placement will run on the site (discussed below in article) - you should have a container placed where you want the parallax to display prior to testing (i.e. mid-article, etc.). You should also have a test page (with the container set up) to traffic to so you can go back into the build and adjust the scroll speed or parallax trigger point as needed.
First, prepare your assets. The Background image should be taller than your container height so it can "parallax scroll" up and down when a viewer moves on the page. Any other assets like logos, text, etc. should be supplied as their own individual .png or .jpg files saved on a transparent background.
Open the builder and create a New File – choose “Banner” as the Format and put in the canvas dimensions and a backup image/click url (for this example our container on the site is 800px wide by 300px in height so that is what we will make the canvas size. *Note: you will want your background image to be taller than 300px so there is "overflow" imagery that shows when parallax scrolling):
Upload your assets to the canvas via the landscape icon .
All your asset layers will shows at the bottom left of the builder:
Arrange your assets on the canvas.
Click off of the assets (anywhere in the black area off canvas). Go to the right of the builder under General Properties:
Click on "Fill Color" box under the Design section and select the "X" (for Transparency) button:
Once Transparent is selected, it will show as below in the "Fill Color" box. Your Ad Canvas will now be Transparent:
So far this is what our ad looks like in the builder:
Place your background image at the bottom edge of the canvas (for this example we want the background to parallax scroll down and have somewhere - down - to go).
Select the background image, then go to the left side of the Builder in the Tools sectionNext, click on the Animation icon to the left of the builder and the “Animations” screen will appear:
Click on the arrow in the first field (next to the default “slide”) and choose Parallax Scroll:
Once selected, you can change the Scroll Speed, Direction, Pin to Y Axis, and Custom Trigger point.
Scroll Speed – how fast your image will move.
Direction – choose the image to move either up, down, left or right.
Pin to Y Axis – select to pin the image to a Y Axis point on the canvas, this is where your image will stop scrolling. Or you can choose to not select.
Custom Trigger – if left unchecked, the default will set the trigger point (start of animation) at 90% from the top of the page OR the top of the ad container (whichever is higher). The trigger point will display on the preview page for you to check however, it is recommended to test on live page. For help identifying or troubleshooting site/trigger point settings, please contact firstname.lastname@example.org
If you select the Custom Trigger, you can set the page position in percentage or pixels. i.e. if you plan to run this ad 30% from the top of your site, you can set this as the custom trigger point and it will show the start and end points where the animations happen in preview according to your settings.
NOTE: If you select the Custom Trigger point for just one animation, it will set the same trigger point for the rest of your animations (unless you define each one).
In this example, we will set the parallax scroll animation as below and hit “Add”:
We set the Scroll Speed to start off as 100% - later, once it is trafficked to a test site, we can come back into this animation (by right clicking on the red animation bar at the bottom of the builder) to edit the speed. This is just an estimate – you need to preview the ad to see how fast and make adjustments according to your customer’s feedback.
We set the direction as Down so the background will scroll down.
In this example, we didn't Pin to a Y Axis because we want our background to keep scrolling - but if you wanted it to stop parallaxing - you could select this and specify where on the canvas it should stop. (To figure out the “Pin to Y Axis” – place the asset on the canvas where you want it to end up and look at the Y axis it is placed at in your General Properties).
We set the Custom Trigger Page Position to 50% for this example. Again, depending on where your container is placed on your site (percentage from top of the site), you may need to come back in and adjust the parallax trigger point later.
Be sure to save your ad along the way - you can Preview the ad to test at any point (it's best to set it up in a campaign/traffic to a test site to test. If you want to edit the Parallax Scroll animation, go to the bottom of the builder, select the asset, and right click on the red bar showing the animation:
When you click on “Edit”, the following screen will appear:
Make any necessary changes and click “Apply”.
* Once saved - you should refresh your test site to see the changes applied. BE SURE TO CLICK THE REPUBLISH ICON at the campaign level for your changes to take effect in the trafficked tag/to see on refreshed site. If more edits are necessary, go back into the ad, right click on the parallax animation and make the updates and Save. Repeat as necessary.