I'm imagining a fast mileage counter style element, similar in style to the spinning numbers on this website (scroll down a little), but with the numbers spinning from zero to 60, or possibly 0, up to 100, resetting back at 0 and then up to 60, and spinning in the same direction.
Here's an image of the static page for reference: http://d.pr/i/F1rc
It's the percentage in the middle that I want to animate on page load.
Thanks for any help
You can do this purely in CSS & HTML, however it is definitely not a sensible choice, using JS would accomplish better, more efficiently.
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.circle {
background: red;
border-radius: 999px;
display: inline-block;
height: 150px;
padding: 100px 0 0 20px;
width: 230px;
color: white;
font-size: 50px;
font-family: verdana;
font-weight: bold;
}
.counter {
height: 50px;
overflow: hidden;
position: relative;
display: inline-block;
text-align: center;
}
ul {
-webkit-animation: counter 4s infinite;
-moz-animation: counter 4s infinite;
animation: counter 4s infinite;
position: relative;
}
@-webkit-keyframes counter {
0% {
top: 0;
}
10% {
top: -50px;
}
20% {
top: -100px;
}
30% {
top: -150px;
}
40% {
top: -200px;
}
50% {
top: -250px;
}
60% {
top: -300px;
}
70% {
top: -350px;
}
80% {
top: -400px;
}
90% {
top: -450px;
}
100% {
top: 0px;
}
}
@-moz-keyframes counter {
0% {
top: 0;
}
10% {
top: -50px;
}
20% {
top: -100px;
}
30% {
top: -150px;
}
40% {
top: -200px;
}
50% {
top: -250px;
}
60% {
top: -300px;
}
70% {
top: -350px;
}
80% {
top: -400px;
}
90% {
top: -450px;
}
100% {
top: 0px;
}
}
@keyframes counter {
0% {
top: 0;
}
10% {
top: -50px;
}
20% {
top: -100px;
}
30% {
top: -150px;
}
40% {
top: -200px;
}
50% {
top: -250px;
}
60% {
top: -300px;
}
70% {
top: -350px;
}
80% {
top: -400px;
}
90% {
top: -450px;
}
100% {
top: 0px;
}
}<div class='circle'>
+
<div class='counter'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>%
</div>
How about a plugin :
$.fn.count = function(speed) {
return this.each(function(_, elem) {
var from = parseInt($(elem).data('from') || 0, 10),
to = parseInt($(elem).data('to') || 100, 10);
$(elem).text(from);
(function run(from, to) {
$(elem).text(parseInt(from, 10)+1);
if (from < to-1) setTimeout(function() {run(++from, to)}, speed || 300)
})(from, to);
});
}
that can easily be used as
$(element).count(100);
and where you'd set the values as
<div data-from="0" data-to="100">0</div>
Maybe you may want to use javascripts setTimeout.
Let the following be your number container:
<div id="number"></div>
//Some iterator pseudo-class
function NumberIterator() {
//The number to start with
this.number = 0;
//List of numbers to pass through
this.goals = [];
//Private - current goal
var currentGoal = 0;
//Whether to infinitelly loop around
this.infinite = false;
//Pause between changing number
this.delay = 50;
//Timeout ID
var t_id = null;
//Self-reference
var _this = this;
//Is running or not
var running = false;
//This method will be called automatically
this.step = function() {
//If out goal is smaller than number decrease it
if(this.number>this.goals[currentGoal])
this.number--;
//if our goal is larger, increase
else if(this.number<this.goals[currentGoal])
this.number++;
//If equals, perform ongoal actions
else {
currentGoal++;
if(currentGoal>=this.goals.length) {
if(this.infinite)
currentGoal = 0;
else {
this.stop();
}
if(typeof this.ongoal == "function")
this.ongoal(this.number);
}
}
if(typeof this.onstep == "function")
this.onstep(this.number);
if(running) {
tick();
}
}
this.stop = function() {
if(t_id!=null) {
clearTimeout(t_id);
t_id = null;
}
running = false;
}
//Start counter with this:
this.start = function() {
this.stop();
running = true;
this.step();
}
//This one is heart of the program. It delays between iterations
function tick() {
if(t_id!=null) {
clearTimeout(t_id);
t_id = null;
}
if(running)
t_id = setTimeout(function() {_this.step();}, _this.delay);
}
}
//Save div element reference (it's faster to use reference than function call)
var div = document.getElementById("number");
//Set up ne instance of that class
var iterator = new NumberIterator();
//Configure waypoints
iterator.goals = [100,60,0,60];
//Set it to iterate indefinitely through waypoins (that's quite fun)
iterator.infinite = true;
//On step callback
iterator.onstep = function(num) {
div.innerHTML = num;
}
//Start the thingy
iterator.start();
If the number animation is supposed to be static over-time, I you can also use GIF animation (these can be one-time animations as well). So, if it's going to be allways the same, pick your favorite gif animator and create it as an image. It must get cached on client side.
$(function() {
function count($this){
var current = parseInt($this.html(), 10);
$this.html(++current);
if(current !== $this.data('count')){
setTimeout(function(){count($this)}, 50);
}
}
$("span").each(function() {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
});
