Using parallax to discuss college athletic spending

Athletic Spending in ACC and Big Ten

For my final CNS project, I wanted to learn parallax. Parallax is the difference between positions of an object viewed at different depths. It is from the Greek word parallaxis, which means alteration.

Parallax in web design has become huge. Web designers are using parallax scrolling to create the effect that images or text are moving at different speeds. As the user scrolls, different images and text come into view. It is a sort of animation — without needing something like Flash. View great examples of parallax scrolling in web design.

I based the graphic’s design on this demo. I also used a jQuery plugin called stellar.js for this project. Stellar.js makes coding parallax scrolling easier. You add data attributes to the html markup and then run $.stellar().

For this graphic, I compiled data from the Knight Commission on Intercollegiate Athletics. I compared athletic and academic spending at schools in the ACC and Big Ten conferences. And for an added focus, this graphic provides a look at athletic finances as the University of Maryland switches conferences from the ACC to the Big Ten.

I am excited to create more projects using parallax and stellar.js.