How to create HTML5 Halloween banners with BannerFlow

October 15, 2015 Emma Cullen

With Halloween right around the corner, it's time to build and launch your Halloween banner campaigns. With American's spending over $7 billion dollars on Halloween, it's worth launching some campaigns during this period. You can create great-looking HTML5 Halloween banner ads with BannerFlow regardless of how much time and resources you have!

This article looks the mechanics of these banners and how they were built using the BannerFlow HTML5 banner builder and give you insights as to how you can use BannerFlow to make anything you can imagine!

1. HTML5 rotating 3D Cube banner

This HTML5 rich media ad that has been built using BannerFlow Advanced Formats. To create the rotating Cube in BannerFlow, it is very straightforward. You just make different banners as normal to create the faces of your Cube and then put those together in the Advanced Formats tabs in BannerFlow. 

The rotating Cube above is in fact made up of 4 different BannerFlow banners that have been put together to form a 3D Cube.

This process makes it very quick and easy to build rotating Cubes (and other Advanced Formats) without having to write a single line of code! There is no limit your banner design; you can use animations and translations here as usual too!

Now let's looks at this banner deeper.

Side 1

This side of the rotating Cube had used graphical elements in combination with custom animations built in BannerFlow.

The graphical elements make up the bulk of the banner. Images of trees make up the background while graphics of ghosts and product images make up the focus of the banner. It is easy to upload graphical elements in BannerFlow; you can simply do this by dragging and dropping them onto the canvas, or clicking Upload. The BannerFlow library offers different features meaning that you can build any banners you like in the tool.

There are some animations that are included in this banner. Some of them are pre-set already available to use in BannerFlow. This means that is quick and easy to so many animations by selecting the preset.

If we look at the ghosts, we can see that they have been given an effective hovering effect. This animation has been created using BannerFlow animations and transitions, which allows BannerFlow users to build custom and complex animations for their banners.

Side 2 & 3

Both sides 2 and 3 of the banner display product images with a price and a call to action making it easy for viewers to take action directly when they see content that is relevant to them.

The call to action, or button, has a pulsating effect that grabs the intention of the viewer, making it clear for them where to click. This pulsating effect is a preset in BannerFlow and can easily be added to all elements on your banner with one click!

Side 4

The fourth and final side of this HTML5 rich media banner ad is the spinning logo of our e-commerce brand. This effect was created by taking one of the preset animations in BannerFlow and modifying it to make it spin. This shows how versatile BannerFlow animations are.

2. HTML5 Halloween countdown timer banner

The next banner shares a similar theme, using the same graphical elements with different product images, and the addition of a BannerFlow Widget, the Countdown Timer.

The Countdown Timer, available in BannerFlow Marketplace, can be used to countdown to different times or events, chosen by you. This is great to use when you are leading up to an event or similar and can help to build up anticipation for that event. Use this to countdown to a holiday or to mark the start or end of a sale of special offer you have.

BannerFlow Marketplace gives BannerFlow users access to a range of different elements that they can use to make their banners even more engaging

3. HTML5 rich media animated Carousel banner

The next banner shares a similar theme, using the same graphical elements with different product images, and a Widget from the BannerFlow Marketplace. The Countdown Timer, available in BannerFlow Marketplace, can be used to countdown to different times or events, chosen by you.

This is great to use when you are leading up to an event or similar and can help to build up anticipation for that event. Use this to countdown to a holiday or to mark the start or end of a sale of special offer you have.

3. HTML5 rich media Carousel animated banner

This Halloween banner shows how you can effectively show different products on your banner in the format of an animated Carousel banner. Viewers of the banner can interact with it by swiping the banner to reveal different slides.

Now let's looks at this banner deeper.

Slide 1 & 2

The first slide of the Carousel banner uses a variety of different graphical elements and animations. The different layers of elements which use different animations make the banner very eye-catching. 

Slide 3

In this banner, a .gif background has been uploaded to give a fireworks effect. It is possible to upload .gifs to BannerFlow and use these to enhance your banners!

4. HTML5 Fireflies Widget banner

The final banner uses a mixture of graphical elements product images and a BannerFlow Widget to create the background effect.

The Fireflies Widget had also been used in this banner, but here the size of the fireflies has been increased, making for a different, yet equally as a spooky  effect. 

These are some different ways that you can use BannerFlow to build holiday themed banners. However, the possibilities in BannerFlow are endless, and you can do much more! Do you want to get your HTML5 banner ad campaigns created and launched by Halloween? Start your free BannerFlow trial today or contact us and we can show you how!

Previous Article
Banner ads made easy: BannerFlow vs. Adobe Flash
Banner ads made easy: BannerFlow vs. Adobe Flash

Compare the different between BannerFlow and Adobe Flash for banner ad production.

Next Article
Adblock is Bought-up and Joins Acceptable Ads Program, Now What?
Adblock is Bought-up and Joins Acceptable Ads Program, Now What?

Ad-blocking tool Adblock was bought up and now joins the Acceptable Ads program. What does this mean for on...