Flip Counters & Displays with jQuery & PHP

I had an interesting Internet diversion the other day that resulted in me finding some ideas for a small design project. How about building a flip counter?

It started off as a requirement, honest. Every month I want to report on the position of my sites on Google for particular search terms. I want to know that I’m marketing the sites correctly and pushing them up the rankings. Search Engine Optimization (SEO) or Search Engine Marketing (SEM) isn’t rocket science, you simply have to provide what Google wants — quality content. However, how you present this information can make a difference in terms of how your effort is rewarded.

I found a script on Envato’s Code Canyon, the PHP Google Position Checker, that seemed to fit the bill. It’s a simple script that executes each search via PHP’s cURL function and reinterprets the results. It’s not clean, it’s prone to being blocked by Google but it works nonetheless. It would need some clean-up and wrapping around a CRON job to run it monthly but it got me half-way to my objective for a tiny investment of just $3.

And then somebody in the discussion thread suggested it should be integrated with a jQuery Flip Counter. What’s that? I thought so I duly clicked on the link.

It’s an interesting piece of eye-candy and not something I’d be interested in but I thought it may be useful for other projects. I like replicating real-world interaction components on websites because there’s an immediate familiarity that improves the user experience. The more intuitive something is, the less you need to teach them. Websites should be intuitive as you can’t expect visitors to learn how to use your site.

But I found a better version. Googling led me to Chris Nanney’s site and his Apple-Style Counter.

Here’s a demo. Chris uses some additional images in the animation to simulate each digit flipping over which gives a much slicker effect.

I also found a few flip counter graphics on Envato’s Graphic River but I particularly like the look of Cesgra’s Flip Displays Set.

And then I thought wouldn’t it be great to use Chris’ or Cesgra’s images as a base and use PHP’s GD TTF functions to make custom sprites for whatever I wanted. This means I’d get the tween states for the slick animation but also get to choose the font and what to write on each flip panel. This means I could replicate a whole airport arrivals/departure board with A-Z flip components. If I took each frame of animation, split it into a number of component images I could then use GD functions to merge them over the top with the correct alpha transparency, e.g. base + digit + shadow. By splitting each digit into three vertical slices I could also build wide panels for months and days as Cesgra uses in his graphics.

And then Elliot came along with an even slicker set of flip images.

Therefore, if anybody ever does get around to implementing this concept please let me know as I’d love to see if the concept works as well as it does in my head.

No related posts.