Spotlight on Speech Codes 2015 Animated Web Infographic

I took a static infographic made by a client in Illustrator and applied some web magic to make it animated and interactive. Along the way I developed stronger JavaScript, jQuery, and CSS animation skills.

Note: I made this for a client of eResources, my current employer.

Project and Challenges:

A client came to us with a pre-designed infographic made in Illustrator. They wanted it to be interactive, sharable, and viewable on the web.

We had a limited number of hours we could use. This didn’t include enough time for making the infographic fully responsive, so we needed to get creative with how it would work on mobile.

What I learned:

Structuring code in a clean, readable way

Pre-development sketching of outlines

CSS animation with keyframes

Nuances of layering containers and using selectors in CSS.

Giving content sections a parallax effect

Positioning elements by the page’s scroll position

jQuery for clicking and toggling actions

Open Graph and Twitter Card metadata

Making custom share URLs with encoded pre-populated data

Using Javascript to check User Agents to determine whether or not Skrollr should fire (it doesn’t play well with iOS)

View the finished product in action! →

Third-party tools used

Skrollr to drive parallax and positioning elements by the page’s scroll position

Wow.js for triggering CSS animations

Animate.css so I didn’t have to write all of the CSS animations from scratch

Chart.js for rendering the pie charts and making them interactive

jQuery for clicking and toggling actions

In-Progress Photos

I first sketched the infographic out on an IKEA drawing paper roll to plan out where elements should go and how to structure the code overall.

As I wrote the code, I previewed and tested it in real-time with Coda’s AirPreview.

View the finished product in action! →