attachment-52b0eff3e4b04bf179a0ab76

This year we decided to make our holiday eCard in Design Studio. Using parallax scrolling always delights, so I decided to go that route.

This was to my second time around with parallax scrolling, which I originally played with in February. The resulting card uses 2D layers of various sizes to mimic a 3D effect.

To get this wondrous animation, I used the Parallax component, loaded up with images of different sizes. Here are the proportions of the images which inhabit the 600 x 600 canvas:

  • Foreground Snow: 3000 x 1200
  • Foreground Houses: 1500 x 772
  • Middle-ground Snow: 2600 x 1000
  • Background Houses: 900 x 562
  • Background Snow: 2600 x 1000

Parallax is one our Flite Labs components, which are user-created components that accomplish very specific behaviors. Special video players, countdown timers, and an age gate that asks if you’re over 18 are examples of Flite Labs components.

If you like to push the envelope or are looking for inspiration, check out the full list of Flite Labs components here. They aren’t shared to new accounts by default, but it’s easy for us to give you access to them (see the bottom of this post). Like the standard components, they’re configurable to you can get a lot of custom effects out of them.

Back to parallax.

The component causes layers of different sizes to move in proportion to each other, creating that 3D-like effect. Generally speaking, as you recede in space you want smaller images. However, in this scene I wanted to snow to feel atmospheric and really move in the background, so I kept those images larger.

To further amplify the feeling of depth, I reduced the opacity of the snow further back. I also made the color of the rear hill similar to the color of the sky to reduce contrast. If I was being really good I could have muted the houses in the background as well.

Lastly, there are actually two Parallax components in this scene. One controls the majority of the canvas. One controls only the rear layer of snow. I set more wild animation settings on the rear layer so the smallest flakes moves at a different pace than the rest of the scene.

Using parallax scrolling is fun for a card, but given how many people “look with their mouse” there are a lot of ways to use a similar effect to boost engagement in ads as well. Here are a few use-cases:

A background that pans.

Grab and maintain attention on your ad with a background that moves around on mouseover.

Show an image that is larger than your ad.

If your ad features a great product with small details, consider using an image that pans. Not only will you be able to show more, you may grab and hold attention with the novelty of the effect.

Clickable areas can be designated inside the component, allowing for some pretty sophisticated creatives that essentially become games.


Want this component?

Flite customers can have the Parallax component, or any of the Flite Labs components enabled on their account by submitting a support ticket at help.flite.com. Parallax is a Flash component, but if you’re building HTML5 ads, a panning component that offers very similar functionality is in development and being added soon as well.