Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript

11. Building Interactive Infographics

A natural enhancement to infographics on the web is the addition of interactivity through a language such as JavaScript or a library such as jQuery. In this chapter, you will make some simple additions to the infographic from Chapter 10, “Creating Animated Infographics,” enhancing it with the details of the drink recipes, using a combination of CSS animations and jQuery.

One thing that is missing from the example in Chapter 10 is a written description of the drink ingredients. For example, you visually demonstrated that a Rum & Coke is composed of one part rum and two parts cola, but you did not detail this in text anywhere on the page. In this chapter, you will amend that. You will add the information to ...