This article was first published on June 1, 2010 and has been updated to include a few extra features and an improved code base.
I’m a huge baseball fan, so earlier this year, just for a fun side project, I recreated the MLB.com Flash content switcher using jQuery and CSS3.
My goal with this project was to try to recreate the switcher without any extraneous images or other non-essential elements that tend to make stuff less maintainable.
My version uses CSS3’s
border-radius, RGBA colors, opacity, and a small use of a gradient, and still looks acceptable in non-supportive browsers (although the jQuery is not as smooth in IE6 & IE7). Be sure to look at the real version on MLB.com for comparison; there are a few small differences, but mine is basically the same.
To illustrate the features using CSS3, here is an infographic that points those elements out (plus the newly-added play/pause button, which is unfortunately an image, but the only image other than the content images):
New Additions to the Updated Version
When I updated this version, I added a new feature: auto-run functionality with a play/pause button, just like on the real version. The auto-run functionality will pause when the user interacts by clicking to switch content. I think this is a good usability choice, because it prevents the slider from moving at unexpected times. The real MLB version seems to work similarly.
I also made the thumbnails slide up/down instead of fade in/out, to mimic the updates to the real version.
The only major difference between mine and theirs is the nice little clock-like timers that appear on each of the circle links, counting down the time left before the next slide appears. That wouldn’t be too hard to implement, I’d just have to use animated GIFs in place of the circles. But then I would lose the use of
border-radius, which I like because it shows how certain CSS3 features can be used in different ways (although the circles don’t look exactly right in Firefox 3.6, which is a bit annoying).
Finally, there’s a Cuban Baseball website that’s using my version on their home page, which you can see here. They had mentioned to me that they would like to see the auto-run functionality added, so that was kind of the extra inspiration I needed to figure it out and add it.
The code is over 200 lines commented, but will drop down to about 20 lines minified, so it’s not too bad. I’m sure the code could be better, so if anyone has any suggestions, feel free to add to the comments.
Oh and for those wondering, Baseball season is less than 100 days away. :)