jquery number animation?

Question

css

Good afternoon!

Please help with animation numbers. It is necessary to make an animation of numbers like on this site https://randstuff.ru/number/ . Namely, so that, regardless of the number of characters, the numbers fall out from top to bottom in turn. how to do it? the animate method didn't help me much.

Thank you in advance.

Answer 1

or like this

Answer 2

In their widget code , you can peep:

var b = String(a.num);
b.split("");
a = '<span class="new">';
for (var e = 0; e < b.length; e++) a += "<span>" + b.charAt(e) + "</span>";
a += "</span>";
d.find(".new").attr("class", "cur");
d.append(a);
d.find(".cur").fadeOut(100, function() {
  c(this).remove()
});
e = 1;
d.find(".new span").each(function() {
  c(this).delay(parseInt(150 / b.length) * e++).animate({
    top: 0
  }, "fast")
})

They break the number into digits, wrap each one spanwith a positioning style somewhere high, in turn give the effect of .animate() reducing the property topto 0.

css

#RS-number .new {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}

#RS-number .new span {
    position: relative;
    top: -70px;
}