Yan Cui
I help clients go faster for less using serverless technologies.
This article is brought to you by
Don’t reinvent the patterns. Catalyst gives you consistent APIs for messaging, data, and workflow with key microservice patterns like circuit-breakers and retries for free.
Whilst working on the MathDOJO mini game one of the neat little things I tried to do was implement a time meter which steadily counts down and changes colour (from green to yellow to glowing red) as it approaches 0:
First, you need something to represent the meter, a simple <span> element will do:
1: <body>
2: <span id="count-down-meter"></span>
3: </body>
Then you need CSS to define its colour (and glow effect using CSS3 animation which for now, is only supported by webkit browser unfortunately) at different stages
1: /* define the animation (webkit-only) */
2: @-webkit-keyframes redPulse
3: {
4: from { -webkit-box-shadow: 0 0 9px #f00; }
5: 50% { -webkit-box-shadow: 0 0 18px #f00; }
6: to { -webkit-box-shadow: 0 0 9px #f00; }
7: }
8:
9: /* initial state of the meter */
10: #count-down-meter
11: {
12: display: block;
13: width: 100%;
14: height: 15px;
15: margin-top: 10px;
16: background-color: #0f0;
17: }
18:
19: /* change color at midway */
20: #count-down-meter.middle
21: {
22: background-color: #ff0;
23: }
24:
25: /* change colour and play animation when it's on its last leg */
26: #count-down-meter.lastleg
27: {
28: background-color: #f00;
29: -webkit-animation-name: redPulse;
30: -webkit-animation-duration: 2s;
31: -webkit-animation-iteration-count: infinite;
32: }
The animation itself is handled by Javascript, using JQuery’s animate method:
1: function start() {
2: // change to yellow when 40% way through
3: var midWidth = meter.width() * 0.6,
4: // change to glowing red when 70% way through
5: lastlegWidth = meter.width() * 0.3;
6:
7: meter.animate({
8: width: 0 + "px",
9: }, {
10: duration: 5000,
11: easing: "linear",
12: step: function(now, fx) {
13: if (now <= midWidth) {
14: meter.addClass("middle");
15:
16: if (now <= lastlegWidth) {
17: meter.addClass("lastleg");
18: }
19: }
20: }
21: });
22: };
To reset the state changes to the meter afterwards, it’s easiest to remove the “style” attribute as JQuery applies the changes through the “style” attribute, which can be a problem if you had manually inserted style in your HTML:
1: function reset() {
2: meter.stop()
3: .removeAttr("style")
4: .removeClass("middle")
5: .removeClass("lastleg");
6: };
Here’s a live demo:
So that’s it, nice and easy! Enjoy! Hope you find some good use for it.
Whenever you’re ready, here are 3 ways I can help you:
- Production-Ready Serverless: Join 20+ AWS Heroes & Community Builders and 1000+ other students in levelling up your serverless game. This is your one-stop shop for quickly levelling up your serverless skills.
- I help clients launch product ideas, improve their development processes and upskill their teams. If you’d like to work together, then let’s get in touch.
- Join my community on Discord, ask questions, and join the discussion on all things AWS and Serverless.