If you want to share about a topic you’re passionate about, want to learn from others, or just want to meet the tech/creative community in town – you should probably register. Afterall, it’s free.
BarcampNola returns for its 6th year, of which I’ve participated in some fashion since year 4 (also my first year in New Orleans). This year I can’t really take much credit, but along with Joe Ellis, George Mauer, and John Clark we built BarcampNola’s unbearably ridiculous website.
The site mostly features John’s fantastic illustrations, but there are some cool things going on behind the scenes too. Apparently
most all browsers don’t like large gifs, which are littered throughout the site. Because the gifs are each over 1mb, browsers fell to their knees. Joe came up with some sprite animation solutions that greatly reduced the load. Additionally, we only animate bears within view. My poor iPhone 4 still could not handle the amount of awesome that was animating on the page.
Because the context of this site is open to experimentation I thought CSS keyframe animations might be a good solution. I used Sass mixins to generate all the css necessary, which can be quite verbose.
There is at least one downside to this method: Older browsers won’t display an animation, but rather a static image of the first frame. I can live with that.
We now have smoother, more consistent sprite animations. I’m sure there are better ways to implement this – I’d be happy to hear suggestions.