Cómo mostrar contadores de registros

Hola buenas, ¿me podrías decir cómo se llaman los contadores que parecen en esta demo? http://themes.laborator.co/#theme=neon

Son esos cuadraditos de colores que cuando actualizas la página hacen como si contaran y al final muestran un número.

GRACIAS!!!

Respuestas

Desconozco cómo se llaman estos elementos de manera genérica. Además, parece que es un desarrollo propio de este tema, ya que no usa una librería para crearlos. Si te interesa hacer algo parecido, este es el código HTML que utiliza:

<div class="tile-stats tile-neon-red">
    <div class="icon">
        <i class="entypo-chat"></i>
    </div>
    <div class="num" data-start="0" data-end="124" data-postfix=""
         data-duration="1400" data-delay="0">
        124
    </div>
    <h3>Comments</h3>
    <p>New comments today</p>
</div>

Y este sería el código JavaScript necesario para hacerlo funcionar:

/**
 *  Neon Main JavaScript File
 *  (neon-custom.js)
 *
 *  Theme by: www.laborator.co
 **/
 
// Tile Stats
$(".tile-stats").each(function(i, el)
{
    var $this = $(el),
        $num = $this.find('.num'),
 
        start = attrDefault($num, 'start', 0),
        end = attrDefault($num, 'end', 0),
        prefix = attrDefault($num, 'prefix', ''),
        postfix = attrDefault($num, 'postfix', ''),
        duration = attrDefault($num, 'duration', 1000),
        delay = attrDefault($num, 'delay', 1000),
        format = attrDefault($num, 'format', false);
 
    if(start < end)
    {
        if(typeof scrollMonitor == 'undefined')
        {
            $num.html(prefix + end + postfix);
        }
        else
        {
            var tile_stats = scrollMonitor.create( el );
 
            tile_stats.fullyEnterViewport(function(){
 
                var o = {curr: start};
 
                TweenLite.to(o, duration/1000, {curr: end, ease: Power1.easeInOut, delay: delay/1000, onUpdate: function()
                    {
                        $num.html(prefix + (format ? numberWithCommas( Math.round(o.curr) ) : Math.round(o.curr)) + postfix);
                    }
                });
 
                tile_stats.destroy()
            });
        }
    }
});

Antes de usarlo en tus propios diseños, asegúrate de que la licencia del tema lo permite.

@javiereguiluz

29 octubre 2015, 16:44

Gracisa. Lo tendré en cuenta.

@javierecompring

30 octubre 2015, 9:49