Amazon Prime
Standard Media Adverts
Fall in Love with Amazon Prime
This great set of banners was designed to accompany a campaign that saw shoppers falling in love not only with an Amazon product, but with the version of themselves who made the purchase. In the television spot associated with these banners, shoppers fall in love to the beat of well know 80s & 90s love songs including the song All My Life by K-Ci & JoJo. The banners build on that 80s love song feeling by incorporating neon, smoke and all things over-the-top.
These banners are important for many reasons. First and most importantly, is that up to this point, the Amazon brand has shied away from producing animated banner units, usually opting for standard, static units instead. Studies show that animated banners receive measurably higher ROI than their static counterparts, and after reviewing the research, the client saw that animation was a no-brainer.
With this in mind, we set out to animate the banners in such a way that the focus was still very much on the product. The two animations that were chosen to highlight the product (and pack a punch with all the rock ballad cheesiness!) are some of the trickiest animations to produce in HTML5—smoke and neon lights.
Let’s first discuss the tricky smoke animation. Believe it or not, the smoke in the banners below is not a video of smoke. Instead, it is created using CSS and Javascript to scale, pan and move various PNG assets which have been expertly layered on top of each other to give the illusion of real smoke. We were familiar with creating smoke animations from our work with McDonald’s so we were prepared for the difficulty that comes with creating realistic smoke using only code. In the end, we managed to create a lightweight, realistic effect that helps focus the user’s eye and attention on the product.
Neon
The second tricky animation effect we produced for this campaign was the flickering neon lights. Again, these effects were produced without video and only used CSS, HTML5 and Javascript.
To an untrained eye, the animations might look very simple; however, the key to animating realistic neon lights is not the light itself, but the glow that the light produces on the objects around it. Take the chair, for example. As the “I’ve been waiting for you” text builds, so too does the light reflected off the chair. The same goes for the other products in the campaign’s different routes. The trick is to use transparent PNGs with a glow that matches the colour of the neon light. Those glows need to be expertly placed so that they can build on one another without obscuring the product or showing seams in the animation.
Check out the Campaign
See some of our work
Get in touch
Do you have a vision of smoke and neon? Need help bringing that vision to life?
Get in touch
Do you have a vision of smoke and neon? Need help bringing that vision to life?