Animated character counter from zero to value using jQuery

Last Reply 9 months ago By dharmendr

Posted 9 months ago

Im working on lucky draw system.So dont know how to create animated letter increments similar to the way animated number counter.

 

JQuery : (it only read the number in notepad,it cannot read the letter)

    <script type="text/javascript">
        $('.Count').each(function () {
            $(this).prop('Counter',0).animate({
                Counter: $(this).text()
            }, {
                    duration: 2000,
                    easing: 'swing',
                    step: function (now) {
                        $(this).text(Math.ceil(now));
                    }
                });
        });
</script>

 

Asp.Net:

<b><asp:Label ID="Label1" runat="server" Text="" Font-Names="Krona One" Font-Size="70"
ForeColor="#ffff00" class="Count"></asp:Label></b>

 

You are viewing reply posted by: dharmendr 9 months ago.
Posted 9 months ago Modified on 9 months ago

Hi ash10,

Check this example. Now please take its reference and correct your code.

HTML

<div>
    <span class="Count">D</span>
    <br />
    <span class="Count">A</span>
    <br />
    <span class="Count">S</span>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.Count').each(function () {
            var $this = $(this);
            jQuery({ Counter: 0 }).animate({ Counter: $this.text().charCodeAt(0) }, {
                duration: 2000,
                easing: 'swing',
                step: function () {                    
                    $this.text(String.fromCharCode(this.Counter));
                }
            });
        });
    });
</script>

Screenshot