Docs - Guidelines - License

Fetch Yeoman generator for creating HTML5 advertising campaigns

The goal of this project is to streamline banner builds and standardise workflow.

The generator sets up the project scaffolding for you so that you can focus on the fun stuff.

based on pyramidium Bannertime generator ( all praises due )

Quick Start

Install Yeoman, Gulp and Bannertime

$ npm i -g yo gulp generator-fetch-mi-banners

Make a new directory and cd into it

$ mkdir my-campaign && cd $_

Run Bannertime

$ yo fetch-mi-banners

Usage

Usage

Use gulp to automatically launch the banner into the browser with browsersync all your changes will be reflected in the browser with each file save.

Use gulp prod to generate a ZIP file of all the assets of the banner, these will all have been minified as well.

Use gulp backup-gen to automatically generate backup images for each banner.

Creating Elements

You can create DOM elements using the the smartObject function, this will initialise a <div> with the default style of: position: absolute; top: 0; left: 0;.

You are able to set a background image, or set a nested image as a <img> element.

There are helper functions such as center, centerHorizontal and centerVertical to help you position the element.

Other settings are set using a helper function on the element which uses GSAP to process. So this.logo.set({autoAlpha: 0, scale: 0.4}); is the same as TweenLite.set(this.logo, {autoAlpha: 0, scale: 0.4});

Animating

The banner animation is run by the animate function.

By default we are using TweenLite with TimelineLite, but you can change which flavour of GSAP as you require.

More information in the documentation.

Platforms