HTML5 Banners

Over the years i've built my fair share of banners in both Flash and HTML. The animations vary banner to banner but are generally fairly similar except now and then you get some unique ones.

The latest batch required a tessellated animation reveal using triangles. The banner was in six sizes and the reveal had to match the content behind it.

It turns out it's fairly straight forward...here's what i came up with.

See the Pen rxwGqZ on CodePen.

The JS is really just to the heavy lifting in generating all the triangles and delay intervals. You can play with the JS animation delay timings to vary the effect too. The rest is some simple CSS.

I built these in 6 sixes with just slight modifications to change the direction of the reveal.

  • 120x600
  • 300x250
  • 300x600
  • 468x60
  • 728x90
  • 970x250