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.

Sketching it out

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

Live Preview

View the finished product in action! →

Original image:

Spotlight 2015 Static Image

2 responses to “Spotlight on Speech Codes 2015 Animated Web Infographic”

  1. Chuck Grimmett Avatar

    2015: An interactive infographic.…

    2016: Inflation graphs for Thanksgiving dinner prices…

    2017: Opioid crisis data viz:…

  2. Week of November 21 Avatar

    This Article was mentioned on

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: