Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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 files from our example just from your finder or right of your desktop as normal, you'll just see slightly different fonts. So this is what it would look like with the default browser fonts. Everything still works exactly the same. The type just looks a bit different. You can work with it either way, and you'll get the same functional results.
In the next two tutorials, we'll take a deeper look into how everything works.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.