Tutorial: odometer-style number animation | animated rolling characte

tudmin · 07/11/2025

Bueno, un usuario de forobeta busco (/temas/como-se-llama-este-efecto-de-animacion.1071876) esa animacion y me entro curiosidad, hace tiempo tambien quise implementar uno similar en algunas webs, pero recuerdo que no me gustaron ya que abusar de javascript para un efecto de ese estilo como que es un gasto innecesario de recursos, si bien muchos no sienten el impacto de rendimiento, por tener maquinas potentes, mis proyectos suelen pasar por testing bajo equipos de bajos recursos eso verificar .

pero actualmente CSS avanza y es momento de mirar al futuro, y aun asi e visto varios de estos "odometer-style" y lo mismo siguen abusando de javascript en su mayoria, despes de dedicarle 30 min de busqueda y prueba decidi hacer unas pruebas con CSS, si alguien le gusta o le interesa , lo puede mejorar creando un CustomElement, un ShadowRoot,. en si dejo este pequeño aporte , ya aqui es la imaginacion de cada uno

Recuerde leer los comentarios del codigo

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>odometer-style number animation</title>
    <style>
        .fila:before {
            position: relative;
            content: '0 1 2 3 4 5 6 7 8 9';
            transition: 0.3s all;
            position: absolute;
            width: min-content;
            white-space: pre-line;
            line-height: 1em;
        }

        .fila:after {
            content: "_";
            visibility: hidden;
        }
        /* CSS Anterior al 2025 o firefox */
        /*
        .fila[data-n='0']:before {top: 0em;}
        .fila[data-n='1']:before {top: -1em;}
        .fila[data-n='2']:before {top: -2em;}
        .fila[data-n='3']:before {top: -3em;}
        .fila[data-n='4']:before {top: -4em;}
        .fila[data-n='5']:before {top: -5em;}
        .fila[data-n='6']:before {top: -6em;}
        .fila[data-n='7']:before {top: -7em;}
        .fila[data-n='8']:before {top: -8em;}
        .fila[data-n='9']:before {top: -9em;}
        */
        /* CSS moderno 2025 */
        .fila[data-n]:before{
            top: calc(attr(data-n em) *-1);
        }

        .fila {
            display: inline-block;
            overflow: hidden;
            width: min-content;
            white-space: pre-line;
            height: 1em;
            border: 1px solid red;
            position: relative;
        }

        div {
            display: block;
            position: relative;
        }

        h1 {
            display: block;
            position: relative;
        }

        pre {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>
        <span class="fila" data-n="1"></span>
        <span class="fila" data-n="2"></span>
        <span class="fila" data-n="3"></span>
    </div>
    <h1>
        <span class="fila" data-n="6"></span>
        <span class="fila" data-n="1"></span>
        <span class="fila" data-n="3"></span>
    </h1>
    <code>
    <pre>
        <span class="fila" data-n="1"></span><span class="fila" data-n="8"></span><span class="fila" data-n="9"></span>
    </pre>
    </code>
    <div
        style="font-size: 34px; font-family: Verdana, Geneva, Tahoma, sans-serif;color:green; text-shadow:2px 2px 2px red">
        $
        <span class="fila" data-n="6"></span>
        .
        <span class="fila" data-n="0"></span>
        <span class="fila" data-n="1"></span>
        <span class="fila" data-n="9"></span>
    </div>
    <button
        onclick="document.querySelectorAll('[data-n]').forEach( span=> span.setAttribute('data-n', Math.floor(Math.random() * 10)) )">RANDOMIZAR</button>
</body>
</html>

Puedes probar el ejemplo usando la web https://codi.link

[Link Ejemplo Chrome 2025 actualizado]
[Link Ejemplo Para firefox]

Tutorial: odometer-style number animation | animated rolling characte

tudmin

Anexos

Tópicos similares