Of course, you’ve already seen this small and yet very important detail of some web pages: animated counters, accenting the number of completed projects, happy customers, percent of satisfaction or something else. It happens something like this: you keep scrolling page and when a counter becomes visible, it starts increasing/decreasing its number finishing with some favorable value. At this time your eyes are glued to it, so it really attracts an attention.
Reading the above, you must have already came up with couple of applications at your website when such counter could be really useful. If so, I have a good news for you: today we’re creating a new complete and really high grade counter, that will be available in the free WordPress shorcode called CodeLights.
So let’s start.
Stage 1: Dreaming a Shortcode
Let’s close our eyes and think what our shortcode should be.
As we can find out from the relevant Wikipedia article there are several totally different numbers formats that we should consider:
|1 234 567,89||SI style (French version), Albania, Austria, Belgium, Bosnia, Brazil, Bulgaria, Canada (French-speaking), Czech Republic, Denmark, Estonia, Finland, France, Germany, Greece, Hungary, Italy, Latin Europe, Lithuania, Netherlands (non-currency numbers, see below), Poland, Portugal, Romania, Russia, Serbia, Slovakia, Slovenia, South Africa, Spain, Sweden, Ukraine|
|1 234 567.89||SI style (English version), Canada (English-speaking), China|
|1,234,567.89||Australia, China, Hong Kong, Ireland, Israel, Japan, Korea, Malaysia, Mexico, New Zealand, Pakistan, Philippines, Singapore, Taiwan, Thailand, United Kingdom, United States|
|1,234,567·89||Ireland, Korea, Malaysia, New Zealand, Philippines, Singapore, Taiwan, Thailand, United Kingdom|
|1.234.567,89||Turkey, Austria, Brazil, Denmark, Germany, Greece, Indonesia, Italy, Netherlands (currency), Portugal, Romania, Russia, Slovenia|
In most of the similar shortcodes editors define initial and final value, prefix, suffix and number format: using a separate input field for each of these. Let’s simplify this as much as possible. Editor should have only two fields for all of these: initial string and final string. And it’s the script’s job to do the rest: to find out numbers, their formats, prefixes, suffixes and use the optimal char replacement animation to pass on its way from the initial string to the final one.
Let’s list some of the special use cases to see the big picture better and to understand essential details of the future algorithm.
|Case Name||Initial Value||Final Value||Comment|
|Basic case||0 projects completed||12 projects completed||A simple number with suffix|
|Zerofill||000,000 comments||244,913 comments||Do not change the string length, change just the certain chars|
|Negative to positive 1||-$120,000 net profit||$94,000 net profit||Animate the numbers through zero|
|Negative to positive 2||$(120,000) net profit||$94,000 net profit||Accounting negative format|
|Several numbers||0 / 0||24 / 7||Animate several numbers separately|
Stage 2: Primitive Animations
The core issue in developing the awesome counter is a way how the initial string will transform into the final one.
Do you know this famous advice on how to eat an elephant? “One bite at a time”. That’s just exactly what we’ll do in here. At first we’ll define primitive animations algorithms and then we’ll split the string to smaller parts, each of which will be animated via one of the primitive animation.
Above we’ve defined lots of different number formats. In addition to this we have two ways of writing negative values and number of decimal places. In case any of these number formatting parameters differs in initial and final strings, for animation purposes the one from the final string’s number will be used.
To be complete our primitive animations system needs ability to animate just anything, like one word into the other, sort of a fallback. Each of the characters has its code, so we can imitate some kind of digital-like animation. One more significant thing: the number of characters may differ, so we need to add/remove some of the characters during the animation.
The most reasonable approach to perform this primitive animation seems to use Wagner-Fischer algorithm and slightly modify it.
And if we’re so lucky that two letters-strings equal (like a constant prefix/suffix) the algorithm simply won’t do anything, as the edit distance of these two strings equals zero.
Stage 3: Allocating Primitive Parts
As you already know, the next task is to split our strings to the primitive-animations parts. We’ll do this the next way:
- Numbers go first. We’ll find the number parts using the regular expressions, and animate them respectively. If any of the numbers won’t have its pair in the other string, it will be treated as a simple text.
- All the rest will be treated as letters parts, and what’s good each of them has its pair from the other string.
In general, that’s all what needed for the start. In one of the next articles we’ll talk about custom counter animation. Stay in touch!