A preview of what we'll be creating


show more A preview of what we'll be creating provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013) show less
please wait ...

A preview of what we'll be creating

In this chapter we're going to be building an animated and interactive infographic to put some of our CSS animation knowledge into practice. I've designed a little infographic comparing a few different types of Espresso Drinks and what's in them. The graphic compares the espresso, milk, and other contents of each drink. Let's take a look at how the infographic works before we start peeking under the hood. At the top, we have a little animated header with our coffee cup sliding in and out. We also have a menu where we can select which drinks to compare. Each time we click a new drink, our versus circle comes bouncing in to really set off our battle.

The data circles for each drink are also animated in. You might have noticed that I'm running this example off a local host, and I'm also using some specialty fonts. These aren't necessary to use the example, I'm just a bit of a font snob, that I wanted to use my Typekit fonts for this example. However, if you run the fil...

A preview of what we'll be creating
Video duration: 1m 10s 1h 56m Intermediate

Viewers:

A preview of what we'll be creating provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013)

Subject:
Web
Software:
CSS
Author:
please wait ...